导航栏悬停下拉填充

我有一个下拉导航菜单，当您将鼠标悬停在特定导航项上时显示。除了“视频”下拉菜单，一切正常。悬停颜色变化没有完全向右延伸。这显然是因为设置了填充。问题是我不知道如何解决这个问题，而不会搞乱“摄影”项目。我觉得自己像一个白痴，但我不能为了我的生活找出如何让这个工作。 Fiddle 导航栏悬停下拉填充

CSS：

* { 
padding: 0; 
margin: 0; 
} 

} 
ul, ol, dl { 
padding: 0; 
margin: 0; 
} 
nav { 
background-color: #bac9a9; 
height: 35px; 
} 
ul#menu { 
list-style: none; 
text-align: center; 
background-color: #bac9a9; 
padding-top: 5px; 
padding-bottom: 5px; 
width: 460px; 
margin: auto; 
} 
ul#menu:after { 
content: ""; 
background-image: url("../images/navbar-shadow-green.jpg"); 
height: 8px; 
width: 100%; 
display: block; 
position: absolute; 
left: 0; 
margin-top: 30px; 
} 
ul#menu li { 
float: left; 
} 
ul#menu li a { 
text-decoration: none; 
color: #f3ffcf; 
font-size: 22px; 
padding: 5px 25px; 
margin: 0px; 
} 
ul#menu li a:hover { 
background-color: #b2c1a2; 
} 
a.selected-page, ul#menu a.selected-page:hover { 
background-color: #a6b396; 
} 
li#sub ul { 
display: none; 
position: absolute; 
background-color: #bac9a9; 
z-index: 1; 
margin-top: 4px; 
overflow: hidden; 
} 
li#sub ul li { 
display: block; 
float: none; 
border-top-style: solid; 
border-width: 2px; 
border-color: #a6b396; 
text-align: left; 
padding-top: 5px; 
padding-bottom: 5px; 
} 
ul#menu li#sub:hover ul { 
display: block; 
}

HTML：

<nav> 
<ul id="menu"> 
    <li><a href="index.html" class="selected-page">about</a></li> 
    <li id="sub"><a href="#">work</a> 
     <ul> 
      <li><a href="#">videos</a></li> 
      <li><a href="#">photography</a></li> 
     </ul> 
    </li> 
    <li><a href="#">services</a></li> 
    <li><a href="#">contact</a></li> 
</ul> 
</nav>

来源

2013-10-09 user2860771

See this Demo

你只需要悬停BG颜色添加到下拉列表中。

ul#menu li#sub ul li:hover { 
    background-color: #b2c1a2; 
}

来源

2013-10-09 04:45:18

不幸的是，这并不会导致'a'填充'li' ..悬停在右侧的部分..它是无法点击的。 –

哦，是的没错，没有想过，感谢评论。 +1给你的答案。 –

1+也是你的。它本质上工作。 –

使它成为一个block元素，迫使它来填充父：

ul#menu > li > ul > li > a { 
    display: block; 
}

jsFiddle here - 它的工作原理。

来源

2013-10-09 04:47:28

导航栏悬停下拉填充

回答

相关问题