我目前正试图通过添加下拉菜单来扩展导航栏。我什么都试过了，但似乎都没用。有没有什么方法可以让我添加下拉功能，而不必重新创建整个导航栏？
div.content a:link {
color: #000000;
text-decoration: normal;
}
div.content a:visited {
color: #000000;
text-decoration: normal;
}
div.content a:hover {
color: #383838;
text-decoration: normal;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
div.content a:active {
color: #000000;
text-decoration: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #595959;
max-width: 950px;
min-width: 900px;
margin: auto;
box-shadow: 0px 0px 5px #000000;
margin-bottom: 15px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
font-style: normal;
padding: 14px 16px;
text-decoration: none;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
li a:hover {
background-color: #404040;
}<div class="nav">
<ul>
<li><a href="/">Home</a>
</li>
<li><a href=";insertyoutubechannel;">YouTube</a>
</li>
<li><a href=";inserttwitter;">Twitter</a>
</li>
<li><a href="/services">Services</a>
</li>
<li><a href="/contact">Contact</a>
</li>
</ul>
</div>除非你想自学，否则不要重新发明轮子。
链路1
链路2
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li class="pure-dropdown">
<a href="#">Test1</a>
<ul>
<li><a href="#.asp">Test2</a></li>
<li class="pure-menu-separator"></li>
<li><a href="#.asp">Test3</a></li>
</ul>
</li>
<li class="pure-dropdown">
<a href="#">Test1</a>
<ul>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
<li><a href="#">Test5</a></li>
</ul>
</li>
</ul>
</div>
使用CSS
@import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-horizontal ul {
padding:0;
margin:0;
font-weight: bold;
width: 100%;
position: relative;
}
.pure-menu-horizontal ul li {
float:left;
position: relative;
display: block;
}
.pure-menu-horizontal ul li a {
display:block;
}
.pure-menu-horizontal ul ul {
display: block;
position: absolute;
top: 35px;
}
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
visibility: visible;
}
链路3