dropdown menu disappearing when connected with selectmenu

dropdown menu disappearing when connected with selectmenu

im having problems with selectmenu in jquery ui. i have the select menu working fine in html but when i add the jquery ui to the selectmenu the dropdown menu disappears leaving only the selected value in view and if i click that the rest come into view. the strange thing is the selectmenu seems to be working but the look of the dropdown menu is terrible. any ideas what might be happening.

<!---------------jquery ui -------------------->
$(document).ready(function () 
{
    var newsDiv = $( "#newsDiv img" );

    $( "#size" ).selectmenu(
    {
        change: function( event, data ) 
        {
            newsDiv.css(
            {
                width: data.item.value,
                height: data.item.value
            });
        }
    });
});

<!------------- html --------------->
<form action="#">

        <div id="newsDiv">
               <img src="images/news10.png" alt="news photo" width="150" height="150">
        </div>

        <fieldset>
               <select name="size" id="size">
                      <option value="150">150px</option>
                       <option value="200">200px</option>
                        <option value="250" selected="selected">250px</option>
                        <option value="300">300px</option>
                        <option value="350">350px</option>
                </select>
       </fieldset>
</form>