Design Top-Bar Menu with CSS

Posted by stacita on 05 Mar 2010 20:20, last edited by stacita on 05 Mar 2010 20:24

Tags: css menu top-bar

rating: +5+x

This forum post by Rob Elliott on the breakdown of the top-bar menu's CSS components is very helpful:

It would be nice to take up where Rob left off and create a more lasting How-To. Please help!

#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.


#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.

Related articles


Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.