3

只是想了解如何使下拉菜单起作用（它们背后的理论）。

据我所见，它只是使用CSSdisplay: none和.blockz-index

附加事件mouseover并mouseout切换 CSS 类。

基本上是这样吗？

4

4 回答 4

3

还有另一种方法，您可以根据父元素的悬停样式赋予菜单项可见性，例如。

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 菜单背后的一般概念。

于 2009-02-26T04:17:33.867 回答
1

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

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

于 2009-02-26T04:16:39.767 回答
1

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

下拉菜单是垂直的<ul>

需要特殊的 .css 内容：

  • 用于<li>使用“列表样式：无”来摆脱子弹等

  • 使用<li>“显示：内联；” 用于水平布局而不是默认垂直

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

于 2009-02-26T04:58:02.413 回答
0

它可能有助于了解整体情况，以了解为什么 onmouse(out|over) 事件和/或悬停类仅适用于具有子项的菜单项而不是常规菜单项。那是因为它们虽然在视觉上远离其父级，但在语义上仍留在其父级内部。因此，当您的鼠标从父菜单项移到其子菜单项时，仍会认为父菜单项将鼠标悬停在其上。

于 2009-02-26T18:37:13.177 回答