JqueryUI下拉菜单垂直对齐

Question

Hi I am having problem fixing this menu of mine below is the actual image and code any suggestion is well appriciated.

<script type="text/javascript">
        $(function() {
        $( "#menu" ).menu();
        });
</script>

<ul id="menu">
    <li><a href="#">Main Tab</a>
       <ul>
        <li><a href="#">This is link A</a></li>
        <li><a href="#">This is link B</a></li>
       </ul>
    </li>
</ul>

I am getting what I like is I am using jqueryUI I tried .menu() attributes or parameters but still nothing change. I wonder if I can achieve it by just altering css.

Answer 1

I fixed it, this is the link http://jsfiddle.net/kodewrecker/sS93F/

 $(function() {
        $( "#menu" ).menu({ position: { my: "left top", at: "left-1 top+35" } });
        });

some manipulation of menu widget for JqueryUI found Here : http://api.jqueryui.com/menu

Answer 2

ul li > ul {
  display: block;
  clear: both;
  padding: 0;
}

Should do the trick

See: http://jsfiddle.net/mF9sJ/