JQuery UI菜单 - 第一个li有额外的高度

Question

我一直在尝试实现jq-ui的菜单，但我的菜单的第一项始终显示有额外的高度（请参见屏幕截图）如何让它正常工作？ （所有菜单项应该是相同的大小）我正在使用JQuery 1.11.0。 JSFiddle正在http://jsfiddle.net/rsreeram84/YhLh5/23/，但它不起作用（想知道原因，但这是次要问题）

    <table style="position:absolute;left:0px;top:60px;width:100%;z-index:1;background-color:white;height:1px;border-style: solid none solid none;border-color:black; border-collapse:collapse">
    <tr>
        <td align=center id="menubtn-abt" width="175px" class="menubtn">About</td>
        <td align=center id="menubtn-settings" width="175px" class="menubtn">Hello2</td>
        <td align=center id="logo-placeholder-menubar" style="padding:0px;border-style:solid;background-color:white"></td>
        <td align=center id="menubtn-tools" width="175px" class="menubtn" onclick="showMenu()">Tools</td>
        <td align=center id="menubtn-results" class="menubtn" width="175px">Results</td>
    </tr>
</table>
  <ul id="menu" style="width:100px;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
      <ul>
        <li>Item 3-1</li>
        <li>Item 3-2
          <ul>
            <li>Item 3-2-1</li>
            <li>Item 3-2-2</li>
            <li>Item 3-2-3</li>
            <li>Item 3-2-4</li>
          </ul>
        </li>
        <li>Item 3-3</li>
        <li>Item 3-4</li>
        <li>Item 3-5</li>
      </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</body>
<script>
$("#menu").menu();  
    $("#menu").position({
        my: "left top",
        at: "left bottom",
        of: "#menubtn-results"

    });
    function showMenu()
    {
        $("#menu").show();
    }
    $("#menu").hide();

</script>

请帮忙！

Answer 1

我已经更新了你的小提琴：

http://jsfiddle.net/YhLh5/25/

单击“工具”按钮时显示菜单。

        <td align=center id="menubtn-tools" width="175px" class="menubtn" onclick="$('#menu').show();">Tools</td>

这是有效的，我无法在Chrome下重现您的问题。你能检查一下它是否适合你？