-1

这应该是使用 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/

请告诉我我错在哪里。非常感谢。:)

4

3 回答 3

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>

于 2013-09-19T08:35:23.737 回答
0

删除</li><a>的产品。IE

<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>
于 2013-09-19T09:01:48.220 回答
0

这是您更正的 css 和 HTML 代码。小提琴链接

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 结构

<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>
于 2013-09-19T09:16:37.113 回答