Coding CSS Menus without UL and LI
Last night I was struggling with a menu and hover effects. After reading all the interesting tutorials about CSS Menus by various experts who all build their menus as list items.
I initially built the menu as an unordered list with li:hover effects. All worked well in Firefox but the li:hover is not supported in MSIE. So I fiddled and manipulated and experimented for a good hour only to realize my rollover effect would not work in MSIE.
Then it struck me…
Instead of building
With CSS for .nav{}, nav li{}, .nav li: hover{} , .nav li a:link{}, .nav li a:visited{}, .nav li a: hover{}
It is much more simple to code as
with CSS styles for .nav{}, .nav a{}, .nav a:hover {} .
I can set the width for nav a{width: 100%;} and achieve the same results as the li.
I can also control line-height and font-size which shape the menu.
borders, background-color, and color can be set for nav a{} and nav a: hover{}.
Even background images work with .nav a{}.
This is likely the way I would have coded a couple of years ago before CSS and webStandards became the rage. This method still uses CSS and WebStandards but it deviates from the pack of current design philosophy. The list method is still needed for multilevel submenus, however, I prefer the Definitionl list method using dl, dt, and dd tags with nested items listed in the dd tags.
Further controls could also be achieved using Table layouts which is very unpopular with the CSS crowd. Use the best tool for the job and the simplest code whenever possible.
Hope this helps someone out there….
January 4th, 2007 at 8:43 pm
The most simple method isn’t always the most appropriate or semantic. In this case marking a list of links up as a list is the most appropriate method, and in the case of your example, an unordered list would likely be the most appropriate type to use (unless the order was important).
If simplicity was a priority we’d all be publishing markup-less web pages and giving them a .txt extension.