基于CSS的菜单是否只是切换display none / block和z-index？

Question

试着了解如何让下拉菜单起作用（背后的理论）。

从我所看到的情况来看，它只是使用display: none和block以及z-index来使用CSS。

事件附加在mouseover和mouseout上以切换CSS类。

这基本上是吗？

Answer 1

还有一种方法可以让菜单项可见性取决于父元素的悬停样式，例如。

li ul {display: none;}  
li:hover > ul {display: block;}

这意味着您只需使用

即可制作菜单

<ul id="menu">
    <li>
        some item
        <ul><li>sub item</li></ul>
    </li>
    <li>
        some other item
    </li>
<ul>

显然你会想要更多的样式和类等，以防止它应用于所有列表，但这是css菜单背后的一般概念。

Answer 2

CSS菜单还可以利用锚标记上的：hover属性，该属性与mouseover / mouseout事件的工作方式相同。

编辑：我应该说：hover属性并不总是必须在锚标记上，但它是使用最广泛的。

Answer 3

菜单栏是一个水平<ul>，每个下拉菜单都有一个<li>

下拉列表是垂直<ul>

需要特殊的.css资料：

• <li>使用“list-style：none”摆脱子弹等

• 对于<li>使用“display：inline;”用于水平布局而不是默认垂直

• 对于实际可点击菜单项的<a>内的<li>，请使用“padding：10px 20px;” （或其他尺寸）以制作更大的鼠标目标区域

Answer 4

这可能有助于让整体图片理解为什么onmouse（out | over）事件和/或悬停类仅应用于具有子项而不是常规菜单项的菜单项。那是因为他们在视觉上远离他们的父母时，仍然在语义上保留在他们的父母中。因此，当您的鼠标从父菜单项移出其子项时，父项仍然被认为鼠标悬停在它上面。