这应该是使用 CSS3 的下拉菜单导航。但是我的问题是下拉菜单没有显示。就个人而言,我对使用 ul li 感到困惑,但我认为我做对了。但似乎还是有问题。我仍然认为自己是初学者,所以我非常感谢一些帮助。
这是html代码
<div id="nav" class="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#">PRODUCTS</a></li>
<ul>
<li><a href="#">Magazines</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Library Resources</a></li>
</ul>
<li><a href="#">RESOURCES</a></li>
<li><a href="#">PUBLISH</a></li>
<li><a href="#">CAREERS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
和我的CSS,
.nav {
width: 800px;
height: 70px;
margin-right: 0px;
margin-top: 0px;
position: absolute;
top: 65px;
left: 136px;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
z-index: 900;
overflow: visible;
}
.nav ul {
padding: 0 30px;
border-radius: 10px;
list-style: none;
position:relative;
width: 600px;
display: inline-table;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
z-index: 1000;
opacity: 1;
}
.nav ul li:hover > ul li {
display: block;
overflow: visible;
padding: 0;
}
.nav ul li {
float: left;
opacity: 1;
z-index: 1000;
display: block;
}
.nav ul li:hover {
background: #ffa32f;
background: linear-gradient(top, #ffae48 0%, #ffa32f 40%);
background: -moz-linear-gradient(top, #ffae48 0%, #ffa32f 40%);
background: -webkit-linear-gradient(top, #ffae48 0%,#ffa32f 40%);
height: 80px;
opacity: .8;
filter: alpha(opacity=50);
-webkit-transition: opacity .5s linear;
z-index: 1000;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul li a {
display: block; padding: 15px 12px;
color: #000; text-decoration: none;
}
.active{
color: #ffffff;
background: #ffa32f;
background: linear-gradient(top, #ffae48 0%, #ffa32f 40%);
background: -moz-linear-gradient(top, #ffae48 0%, #ffa32f 40%);
background: -webkit-linear-gradient(top, #ffae48 0%,#ffa32f 40%);
height: 50px;
z-index: -1000;
}
为什么不显示下拉框?这是您可以在此处查看更多带有预览的代码http://jsfiddle.net/6a8Qp/2/
请告诉我我错在哪里。非常感谢。:)