css - 悬停时可见性不变

Question

我正在使用可见性属性制作一个简单的导航栏，其中包含悬停时的下拉菜单。但是当我悬停时，条件不会生效。这背后的逻辑是什么？

http://jsfiddle.net/MAvQp/

Answer 1

您的 html 格式错误，ul应该是非li兄弟姐妹的孩子

小提琴

Answer 2

您正在尝试使子项可见

ul li:hover ul{
    visibility: visible;
}

但是子项ul没有嵌套在 中li，因此ul li ul与子项不匹配。因此，将您的 html 更改为类似

<ul>
    <li>Menu Item 1 
            <ul>
            <li>Sub-Menu1 Item 1</li>
            <li>Sub-Menu1 Item 2</li>
            <li>Sub-Menu1 Item 3</li>
            </ul>
    </li>
…

</ul>

另请参阅我的分叉小提琴。