Question

我试图在css中创建一个下拉菜单，使用一些嵌套的ul，但嵌套的ul不显示。这是我的CSS。

我无法理解。使用网络开发者应用程序，我可以清楚地看到菜单位于正确的位置，但当我将鼠标悬停在它上面时，它无法显示。

nav{
    width: 100%;
    background-color: #EFEFEF;
    height:50px;
}

nav ul{
    display:inline;
    margin:0;
    padding:0;
    float:left;

}

nav ul li{
    width: 200px;
    display: inline-block;
    position: relative;
}

nav ul li a {
    color: #888;
    display: block;
    line-height: 50px;
    padding: 0 24px;
    text-decoration: none;
}

nav ul li:hover {
    background-color: rgb( 40, 44, 47 );
 }

 nav ul li:hover a{
    color: rgb( 255, 255, 255 );
 }


 nav li ul {
    position: absolute;
    top:50px;
    display: block;
    width: 200px;
    visibility: hidden;
 }

nav li ul li{
    display: block;
    background-color: #EFEFEF;
    height:50px;
    width: 200px;

}

nav li ul li a{
    color: #888;
    display: block;
    line-height: 50px;
    padding: 0 24px;
    text-decoration: none;

}

nav li:hover ul {
    display: block;
    visibility: visible;

}

HTML：

        <nav>
            <ul>
                <li class="active"><a href="./index.html"><span>Home</span></a></li>
                <li><a href="#">Story <span class="caret"></span></a>
                    <ul>
                        <li class="prova"><a href="#"><span>Fantasy</span></a></li> 
                        <li class="prova"><a href="#"><span>Psynergy</span></a></li>
                    </ul>
                </li>
                <li><a href="#">Characters</a></li>
                <li><a href="#">About</a></li>
            </ul>
    </nav>
    <section id="screen" data-type="background" data-speed="30"> 
        <article> <img src="./img/logo_nintendo.png" width="400px"/> <br>owns an awesome fantasy IP.<br>
            Why are they forgetting about it?   <span>#bringbackthesun</span></article>
    </section>

编辑：我认为问题不在导航器中，但在下一节中。这是jsfiddle：http://jsfiddle.net/wckrdtqd/

Answer 1

将z-index添加到nav上的hover。 Working fiddle

Answer 2

请试一试。

<style>
#header { 
    min-width: 800px; 
    height: 150px; 
} 
#nav {  
    width: 100%; 
    background-color: #333; 
    font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif; 
    float: left; 
}
#nav li { 
    list-style: none; 
    float: left; 
    width: 120px; 
    height: 30px; 
    line-height: 30px; 
    text-align: center;
} 
#nav li a { 
    color: white; 
    text-decoration: none; 
    display: block; 
} 
#nav li a:hover { 
    background-color: #066; 
} 
#home .home a, #home .home a:hover,
#tutorials .tutorials a, #tutorials .tutorials a:hover,
#about .about a, #about .about a:hover,
#contact .contact a, #contact .contact a:hover,
#news .news a, #news .news a:hover {
    background-color: #FFF; 
    color: #000;
    cursor: default;  
}       
#nav li ul { 
    position: absolute;  
    display: none; 
} 
#nav li:hover ul { 
    display: block; 
} 
#nav li ul li { 
    float: none; 
    display: inline; 
}
#nav li ul li a { 
    width: 118px; 
    position: relative; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    background: #333; 
    color: #fff; 
}
#nav li ul li a:hover { 
    background: #066; 
    color: #000; 
}
</style>

<body id="about">
  <div id="header">
    <ul id="nav">
      <li class="home"><a href="#">Home</a></li>
      <li class="tutorials"><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>

      <li class="news"><a href="#">Newsletter</a>
        <ul>
          <li><a href="#">Issue 1</a></li>
          <li><a href="#">Issue 2</a></li>
          <li><a href="#">Issue 3</a></li>
        </ul>
      </li>
      <li class="contact"><a href="#">Contact</a></li>
    </ul><!-- nav --> 
  </div><!-- header -->     
</body>

Answer 3

请将您的屏幕css更改为 -

#screen{
    background: url(../img/wall1.png) 50% 0 repeat fixed; min-height: 800px;
    width: 100%;
    margin: 0 auto;
    background-color: #061832;
    height: 800px;

}

CSS中的下拉菜单

3 个答案: