使用CSS创建交互式（？）导航？

Question

我是HTML和CSS的新手，我不知道确切的词，所以我想我的快速草图会帮助我传达我想要的东西。

图像： HTML

        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">CS/IS 101 Assignments</a></li>
                    <ul>
                        <li><a href="#">Puzzles</a></li>
                        <li><a href="#">Word</a></li>
                        <li><a href="#">Excel</a></li>
                        <li><a href="#">Access</a></li>
                        <li><a href="#">PowerPoint</a></li>
                    </ul>
                <li><a href="#">CS/IS 260 Assignments</a></li>
                    <ul>
                        <li><a href="#">Chapter 3</a></li>
                        <li><a href="#">Chapter 4</a></li>
                        <li><a href="#">Chapter 5</a></li>
                        <li><a href="#">Chapter 6</a></li>
                        <li><a href="#">Chapter 7</a></li>
                    </ul>
                <li><a href="#">Favorite Websites</a></li>
                <li><a href="#">Final</a></li>
                <li><a href="#">Midterm</a></li>
                <li><a href="#">About Me</a></li>
        </ul>
    </nav>

与导航相关的所有内容的CSS

.main-header nav{
background-color:#333333;
height:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.main-header nav ul{
list-style: none;
margin: 0 auto;
}

.main-header nav ul li{
float:left;
display:inline;
}

.main-header nav a:link, .main-header a:visited{
color:#FFF;
display:inline-block;
padding: 10px 25px;
height: 20px;
}

.main-header nav a:hover, .main-header nav a:active, .main-header nav .active a:link, .main-header nav .active a:visited{
background-color:#bc9c98;
text-shadow: none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.main-header nav ul li a{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Answer 1

以下是下拉导航的演示：http://codepen.io/anon/pen/iwuGI

你的加价和css非常接近！

标记变化很小。它需要将嵌套的UL元素移动到父LI中。

<li><a href="#">CS/IS 101 Assignments</a></li>
    <ul>
        <li><a href="#">Puzzles</a></li>
        <li><a href="#">Word</a></li>
        <li><a href="#">Excel</a></li>
        <li><a href="#">Access</a></li>
        <li><a href="#">PowerPoint</a></li>
    </ul>

为：

<li><a href="#">CS/IS 101 Assignments</a>
    <ul>
        <li><a href="#">Puzzles</a></li>
        <li><a href="#">Word</a></li>
        <li><a href="#">Excel</a></li>
        <li><a href="#">Access</a></li>
        <li><a href="#">PowerPoint</a></li>
    </ul>
</li>

添加CSS以隐藏嵌套的UL：

.main-header nav ul ul {
    display: none;
}

覆盖LI的父CSS（我们不需要浮动！）：

.main-header nav ul li ul li {
    float: none;
    display: block;
}

当我们将鼠标悬停在父级上时显示嵌套的UL：

.main-header ul li:hover > ul {
    display: block;
}