css navbar hover drop down - html

Question

I am looking to make a navbar menu that drops down when hovering over a specific navbar li.
My navbar looked and worked fine until I tried to get a hover drop down to work. Specifically this is what I am looking for:hover over "work" and get a drop down menu of "videos" and "photography". I don't think that I am nesting anything wrong, so I figure that it is the CSS that is wrong. I have tried a few different suggestions, but nothing has worked.
Side note: I recently gave the nav items the id of "menu". I had it so that the current page on the nav would be a certain darker color and when the current page nav was hovered it would stay that same color. This worked before I changed to id to "menu" (before it was "nav ul li"). Now when you hover, it changes the color. what made this change happen?
* {
padding: 0;
margin: 0;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
ul#menu:after {
content:"";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 4px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 10px 25px;
margin: 0 -2px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
}
ul#menu li#sub:hover ul {
display: block;
}
<nav>
<ul id="menu">
<li>about
</li>
<li id="sub">work
</li>
<ul>
<li>videos
</li>
<li>photography
</li>
</ul>
<li>services
</li>
<li>contact
</li>
</ul>
</nav>
JSFiddle

Answer 1

I think you have got the nesting wrong. You want the list which is revealed when you roll over the work list item to be a child of that list item. Try updating your HTML / CSS as follows (see fiddle):
HTML:
<nav>
<ul id="menu">
<li>about
</li>
<li id="sub">
work
<ul>
<li>videos</li>
<li>photography</li>
</ul>
</li>
<li>services
</li>
<li>contact
</li>
</ul>
</nav>
CSS:
* {
padding: 0;
margin: 0;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
ul#menu:after {
content:"";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 4px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 10px 25px;
margin: 0 -2px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
position: absolute;
top: 35px; left: 115px;
background-color: #b2c1a2;
}
li#sub ul li {
display: block;
}
ul#menu li#sub:hover ul {
display: block;
}