2 level horizontal navigation in CSS

A 2 level horizontal menu is not
that difficult to create using CSS. If you keep it all text-based it
should be doable once you know the basics. But how about the creation
of such menu using images only for the purpose of having the extra
graphical freedom?

The structural code doesn't contain any images. For every button we
use a different id. These id's are then styled. The text will be
replaced by images, used as a background. Here is an excerpt of the
code:

<ul id="navigation">
<li id="home" title="link to homepage"><a href="#" >Home</a></li>

<li id="products" title="link to products"><a href="#">Products</a>
<ul>
  <li id="softw" title="link to software"><a href="#">Software</a></li>
  <li id="hardw" title="link to hardware"><a href="#">Hardware</a></li>

</ul>
...

The trick is using "text-indent: -9999px" (this places the text
outside the browser window) and use one image (the entire navigation)
as a background.

The navigation of the first level contains two images
(navigation.gif and navigation_over.gif). For some reason, my rollover
effect didn't work using only one image, it does work however in the
second level. Since it works in the second level I have no idea why it
doesn't in the first one :-S

 ul#navigation li a {
border: 0;
display: block;
height: 25px;
background: url(navigation.gif) no-repeat;
}

ul#navigation li a:hover {
border: 0;
display: block;
background-image: url(navigation_over.gif);
}

By using background positioning, width, height and "display:block"
we 'reveal' each button of the navigation. Here is an example of the
support button:

li#support a {
width: 67px;
}

li#support a:link,
li#support a:visited,
li#support a:hover {
background-position: -264px 0px;
}

• view the menu


• view the CSS stylesheet

Original Resource : http://veerle.duoh.com/ Original Posted : Veerle