Question

这可能是使用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/

以查看更多代码

请告诉我哪里错了。非常感谢。：）

Answer 1

第一个问题是您的下拉列表ul不在您的父项目li

中

将其更改为：

<div id="nav" class="nav"> 
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#">PRODUCTS</a>
    <ul>
        <li><a href="#">Magazines</a></li>
        <li><a href="#">Books</a></li>
        <li><a href="#">Library Resources</a></li>
    </ul>
</li>
<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>

Answer 2

在</li>个产品后删除<a>。即。

<li><a href="#">PRODUCTS</a>

而不是

<li><a href="#">PRODUCTS</a></li>

并在</li>

之后<ul>标记完成后添加结束<li>代码

<li><a href="#">PRODUCTS</a>
       <ul>
           <li><a href="#">Magazines</a></li>
           <li><a href="#">Books</a></li>
           <li><a href="#">Library Resources</a></li>
       </ul>
</li>

Answer 3

这是您更正后的CSS和HTML代码。的 FIDDLE LINK

<强> CSS

.nav { width: 800px; margin-right: 0px; margin-top: 0px; font-family: 'Open Sans', sans-serif; font-weight:500; margin:0 auto; } .nav ul { padding:0 30px; border-radius:10px; line-height:47px; background-color:#67b01a; height:47px; } .nav ul li { float:left; position:relative; } .nav ul li a { display:block; padding:0 12px; color: #000; text-decoration:none; } .nav ul li:hover a { color: #fff; 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%); opacity: 0.8; filter: alpha(opacity=50); -webkit-transition: opacity .5s linear;*/ } .nav ul li ul { display:none; background-color:#ffa432; position:absolute; left:0; top:47px; width:400px; padding:0 30px; } .nav ul li ul li { float:left; } .nav ul li ul li a { background-color:#e1a62b; color:#fff; } .nav ul li ul li:hover a, .nav ul li ul li a.active { background-color:#e1891c; color:#fff; /*opacity:1.0; filter: alpha(opacity=1); -webkit-transition: opacity 1.0s linear;*/ } .nav ul li:hover ul { display: block; }

HTML STRUCURE

<div id="nav" class="nav"> <ul> <li><a href="index.html">HOME</a></li> <li> <a href="#">PRODUCTS</a> <ul> <li><a href="#">Magazines</a></li> <li><a href="#">Books</a></li> <li><a href="#">Library Resources</a></li> </ul> </li> <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下拉菜单错误，不显示

3 个答案: