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来显示第二级ul，只要用户点击span区域，span的样式就是块级别，因此，您可以单击列表项中的任何位置并具有预期的功能。

问题是，在用户点击span元素并显示无序列表后，span就像内联元素一样，要消失，ul用户必须单击文本并单击parent-li区域不行。

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

也许有更好的解决方案来创建垂直菜单，但我只是想弄清楚为什么span元素的行为是这样的，是什么原因造成的。

Answer 1

将#nav li ul的样式更改为

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

目前填充正在影响span标记。

Answer 2

添加到您的范围position:relative

jQuery垂直菜单问题

2 个答案: