Question

我正在创建一个简单的下拉菜单，无法理解为什么它不会在悬停时显示出来。我可以隐藏它，所以我知道我的目标是正确的代码，但它在悬停时没有任何作用。这是我的代码：

  <nav class="fluid nav"><ul>
    <li><a href="about.html">about</a></li>
    <li><a href="menu.html">menu</a>
        <ul class="subnav">
            <li><a href="#">Pris Fix</a></li>
            <li><a href="#">Dinner</a></li>
            <li><a href="#">Wine List</a></li>
        </ul>
   </li>
    <li><a href="reviews.html">reviews </a></li>
    <li><a href="#contact.html">contact</a></li>

CSS：

.nav
{   display:block;
padding: 2em 0 2em 0;
color: #676027;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 300;
font-size: small;
text-transform: uppercase;
}
.nav ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.nav ul li{
display:inline;
padding: 0 2em 0 2em;
letter-spacing: 0.2em;
}
.nav ul li a{
text-decoration: none;
text-transform:uppercase;
padding: .2em 1em;
color: #696229;
}

.nav ul li a:hover, .nav ul li a:active, .nav ul li a:focus
{color: #000;}

.nav ul li .subnav{display:none;}
.nav ul li .subnav li a{font-size: x-small;}
.nav ul li:hover ul .subnav{display:block; position:absolute;}
.nav ul li:hover ul .subnav a{display:block; width: 80px;}

提前致谢。

Answer 1

您可以在.nav上给出的位置，或者您可以在此处查看引用http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 2

你做的是这个

.nav ul li:hover ul .subnav{display:block; position:absolute;}
.nav ul li:hover ul .subnav a{display:block; width: 80px;}

ul .subnav应该相互关联，否则您正在搜索.subnav的孩子ul。

所以将ul .subnav更改为ul.subnav。中间没有空间。

CSS下拉菜单悬停不起作用

2 个答案: