Question

a busy cat http://i61.tinypic.com/2nu3ok3.jpg

我创建了一个带有jquery的菜单：div 1表示主菜单，div 2表示子菜单。将鼠标悬停在项目上时，div 2将显示在所选菜单下。

我可以更优化菜单吗？

您可以使用图像中描述的功能在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。

CSS / JQuery水平菜单有2行

1 个答案: