1

有人能帮我吗。我有这个 html 代码，我想用 css 设计我的子菜单，但我是新手，我真的需要帮助

<div class="nav-collapse collapse">
            <ul id="nav-list" class="nav pull-right">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#updates">Updates</a></li>
                <li><a href="#screenshots">Screenshots</a></li>
                <li><a href="#howto">How to</a></li>
                    <ul>
                    <li><a href="#">Sub Item 1.1</a></li>
                    <li><a href="#">Sub Item 1.2</a></li>
                    </ul>
                <li><a href="#permissions">Permissions</a></li>
                <li><a href="#download">Download</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>

我想为我的子菜单设置下拉列表。我的菜单目前是水平的

4

1 回答 1

6

为了让你开始...

.nav li ul { display: none; }

.nav li:hover ul { display: block;}

您的 HTML 还需要进行少量编辑...您需要将子菜单<ul>嵌套在 parent<li>中。如下所示：

<li><a href="#howto">How to</a>
    <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>

这是一个演示此工作的jsfiddle，显然它不是水平的，因为我缺少您已经制作的样式，但是当您将鼠标悬停在“如何”上时，该功能仍然有效：

http://jsfiddle.net/Zuvdf/

于 2013-03-14T20:20:52.587 回答