CSS下拉菜单悬停不起作用

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

<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;}

在此先感谢。

来源

2014-02-17 user3317435

'position：absolute;'需要定位。尝试摆脱它看到它在所有值之前工作之前 – Anthony

这里是一个jsfiddle的代码http://jsfiddle.net/T49ZW/（包括缺少关闭UL和导航标签，这样一来，人们更容易帮助你=] –

位置，你可以给.nav，或者你可以看到在这里引用http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

来源

2014-02-17 02:27:23 Koyix

您所做的一切就是这个

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

的ul .subnav应附海誓山盟，否则你是搜索ul的孩子.subnav。

因此将ul .subnav更改为ul.subnav。中间没有空间。

来源

2014-02-17 02:27:30 Chanckjh

CSS下拉菜单悬停不起作用

回答

相关问题