To simplify, I recommend the following structure for a navigation menu:
<ul id="nav">
<li>Navigation</li>
<li><a href="#opt1">Option 1</a></li>
<li><a href="#opt2">Option 2</a></li>
<li><a href="#opt3">Option 3</a></li>
</ul>
Use the following CSS styles:
/* default display for all 'li' elements:
*/
#nav li {
display: inline-block;
}
/* hides subsequent 'li' elements and first child when the ul is hovered:
*/
#nav li + li,
#nav:hover li:first-child {
display: none;
}
/* shows next 'li' element on hover:
*/
#nav:hover li + li {
display: inline-block;
}
View a demo on JS Fiddle here.
In response to Rygh2014's question about using this for a vertical menu, you can easily switch to a vertical layout by changing display: inline-block to display: list-item:
#nav,
#nav li {
list-style-type: none;
}
#nav li {
display: list-item;
}
#nav li + li,
#nav:hover li:first-child {
display: none;
}
#nav:hover li + li {
display: list-item;
}
See the vertical menu demo on JS Fiddle here.
Note that the list-style-type property has been set to none to remove bullet points in the list items.