- Start with a bulleted (unordered) list of links
- There is a bug in FF ad IE where you need to place a space after the
link text and before the close of the link tag to get the hover to display
properly, its minor, but annoying.
- #topNav
Create a container CSS rule, like #topNav and apply it to the cell
(td) or to a div wrapped around the bulleted list .Choose a bg color
of the container div to match the bg color on the links. If you want
to center the nav, you need to use the div method and set a width,
then auto margins right and left.
- #topNav ul
Include the padding that you will have on the a and a:hover to stretch
the container. To center text, add rule text align: center.
- #topNav li
For horizontal menus, the li tag needs the rule display: inline
- #topNav a
Style the colors, font, and padding with the a and a:hover rules, remove
the underline
- #topNav a:hover
Place the same margin and padding that is in the a rule, match padding
with that in the ul. You can add an underline on the hover box, just
make sure that you decrease the padding amount to compensate for
the height of the border. In this example, there is a 3 px bottom
border so the padding-bottom has been decreased from 10 (-3) to 7px.
|