jQuery垂直菜单问题

Question

所以我有一个简单的无序列表：

<ul id="nav">
<li>
    <span>Group 1 »</span>
    <ul>
        <!-- list items -->
    </ul>
</li>
<li>
    <span>Group 2 »</span>
    <ul>
        <!-- list items -->
    </ul>
</li>
</ul>

我设计了这个菜单，并添加了一些jQuery，每当用户点击span区域时，就会显示二级ul，span的样式是块级的，所以你可以在列表项内的任何地方点击，并具有预期的功能。

问题是，在用户单击span元素之后，无序列表就会出现，span就像一个内联元素，要想消失，ul用户必须单击文本，而单击parent-li区域将不起作用。

你可以在这里看到现场演示：http://jsfiddle.net/d2Z7m/6/

也许有更好的解决方案来创建一个垂直菜单，但我只是想弄清楚为什么span element会这样，是什么导致了这一现象。

Answer 1

将#nav li ul的样式更改为

#nav li ul {
    width:100px;
    margin: -35px 0px 0px 155px;
}

因为目前填充正在影响span标签。

Answer 2

添加到您的跨度position:relative