Styling navigation bar with css

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

http://jsfiddle.net/MsAta/

But it'll not work in every browser.

It's better to use javascript - there is plenty of jQuery plugins for menu like that.

Answer 2

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