html - 导航栏悬停下拉填充

Question

我有一个下拉导航菜单，当您将鼠标悬停在特定导航项上时会显示该菜单。除了“视频”下拉菜单外，一切正常。悬停颜色变化没有完全向右延伸。这显然是因为设置了填充。问题是我不知道如何在不弄乱“摄影”元素的情况下解决这个问题。我觉得自己像个白痴，但我这辈子都想不出如何让它发挥作用。 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>

Answer 1

See this Demo

您只需要将悬停背景颜色添加到下拉列表即可。

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