带有 2 行的 CSS / JQuery 水平菜单

Question

我用 jquery 创建了一个菜单：div 1 用于主菜单，div 2 用于子菜单。 当您将鼠标悬停在项目上时，div 2 会出现在所选菜单下方。

我可以让菜单更优化吗？

你能用图片中描述的功能制作一个两行的 CSS 菜单吗？

<div id="main-menu">
    <ul>
        <li><a href="#" class="category" rel="">Home</a></li>
        <li><a href="#" class="category" rel="submenu1">test</a></li>
    </ul>
</div>

<div id="menu-wrap">
    <div id="menu">
        <div id="submenu1" class="submenu">
            <ul>
                <li><a href="#">sub menu 1</a></li>
                <li><a href="#">sub menu 2</a></li>
            </ul>
        </div>
    </div>
</div>

是否可以不使用jquery而只使用CSS来实现菜单？

Answer 1

为了使其工作，子菜单需要嵌套（在 DOM 中）它们的主菜单条目内。我们需要使用列表修改 HTML 标记。

代码描述：我们将为整个事物创建一个容器，并将其浮动。在容器之后，我们将有一个简单地清除浮动的 div，因此页面的其余部分可以正常显示。在容器内部，我们将有一个用于主菜单的无序列表——每个列表项将包含一个链接和一个用于子菜单的无序列表。这些子菜单列表最初将是display:none。我们必须绝对定位子菜单，以便它们出现在主菜单下方而不是中间。然后使用:hover 伪选择器和嵌套选择发生魔术：当悬停主菜单列表项时，它的子ul 标记将设置为display:block。

HTML 更改：

<div id="menu-container">
    <ul id="main-menu">
        <li> <a href="#">Home</a> </li>
        <li> <a href="#">Menu Item 1</a>
            <ul class="submenu">
                <li><a href="#">Submenu 1 Item 1</a></li>
                <li><a href="#">Submenu 1 Item 2</a></li>
            </ul>
        </li>
        <li> <a href="#">Menu Item 2</a>
            <ul class="submenu">
                <li><a href="#">Submenu 2 Item 1</a></li>
                <li><a href="#">Submenu 2 Item 2</a></li>
            </ul>
        </li>
        <li> <a href="#">Menu Item 3</a>
            <ul class="submenu">
                <li><a href="#">Submenu 3 Item 1</a></li>
                <li><a href="#">Submenu 3 Item 2</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="clear">&nbsp;</div>

以及随附的 CSS：

#menu-container {
    float:right;
}
#main-menu {
    text-align:right;
    position:relative;
}
.submenu {
    position:absolute;
    left:0;
    top:1em;
    width:100%;
    text-align:center;
    display:none;
}
#main-menu, .submenu {
    list-style:none;
}
#main-menu li, .submenu li {
    display:inline;
}
#main-menu li:hover ul {
    display:block;
}
.clear {
    clear:both;
}

观看现场演示here。

如果需要，这可能需要一些调整以支持旧版浏览器。一些代码（用于悬停效果）来自A List Apart Suckerfish CSS Dropdown Menu。