Having issues with a drop-down navigation menu that works fine except for the "videos" item. The hover color change doesn't cover the entire width due to padding settings. Struggling to fix this without affecting the "photography" item. Need help figuring it out! 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>