Question

I need to style this navigation bar with css. It’s unordered list. What I have is another ul under some of the pages, which act like child pages for them.
Looks something like this:

<ul id="nav-bar">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Menu</a>
<ul><li><a href="#">Nivo</a></li></ul>
</li>
</ul>

The main think I don’t understand is how to make Nivo (in this case) to show only when user hovers over the Menu list. This is very common way of showing subpages like this, but I don’t get how to make this happen using only CSS.

I am mainly back-end developer, so I hate messing with css stuff, but I have no choice 🙁

Thanks for any help

Answer 1

#nav-bar ul{
display:none;
}
#nav-bar li:hover ul{
display:block;
}