I've written this off the top of my head in between a couple of meetings and I know it's not an exhaustive response but I hope it at least gives you the idea of the structure. Ed and other CSS gurus will no doubt pick up any mistakes over the next 24 hours or so.
A good way to understand the structure is to think of each of the CSS selectors as part of the html tree structure – which they are - for example:
<div id="topbar">
<ul>
<li><a href="#">Milk</a>
<ul>
<li><a href="#">Goats</a></li>
<li><a href="#">Cows</a></li>
</ul>
</li>
<li><a href="#">Eggs</a>
<ul>
<li><a href="#">Free-range</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="#">Cheese</a>
<ul>
<li><a href="#">Wensleydale</a></li>
<li><a href="#">Brie</a></li>
</ul>
</li>
</ul>
</div>
This converts directly to your CSS selectors.
So at the top you have:
#top-bar { }
This covers the overall properties for the top bar. So you would put in here for example the background-color and background-image properties. Perhaps also the font although this will affect list items unless they too have a font–size value set.
Then any list must be either an unordered list <ul> or an ordered list <ol> (starting for example with 1, 2, 3…)
#top-bar ul { }
So before your list you have the <ul> tag which tells you to expect an unordered list. Therefore each of your top bar menus will start with #top-bar ul. You can apply overall properties to this, for example: display:inline or display:table. If you specify for example font-sizes here they would also affect items lower down in the tree.
#top-bar li { }
This is the top-level menu headings. In the html above it is “Milk”, “Eggs” and “Cheese”.
#top-bar li ul { }
This would affect the overall properties of the submenu.
#top-bar li ul li { }
This will affect a list <li> inside a list <li>, i.e the submenu and would normally include things like float or display properties.
#top-bar li a { }
This one will affect all anchors inside your top level lists.
#top-bar li ul li a { }
And this would affect an anchor inside a submenu.
Hover:
#top-bar a:hover { }
If you had an item in the top bar that wasn’t in a menu but was a link to something you could use the top-bar a:hover. For menu items though you would normally see something like #top-bar ul li:hover a:hover { } and if you specified a text-decoration:underline for example it would underline each of the list items in turn as you hovered over each one.
#top-bar li ul li a:hover { }
This is for the hover on the anchors in the submenus
#top-bar li:hover ul, #top-bar li.sfhover ul { }
I’ve never been quite sure what sfhover is and does but I think it comes from some sort of menu creator package. I usually delete it from my themes.
So anyway, I hope that helps, but do come back with further questions.
I'll look at your sandbox site over coffee after my next meeting which starts …two minutes ago.
Rob
(account deleted)