2 level horizontal navigation in CSS with images

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

Another 2 level horizontal navigation in CSS

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

<ul id="navigation"><br />  <li id="home" title="link to homepage"><a href="#" >Home</a></li><br />  <li id="products" title="link to products"><a href="#">Products</a><br />   <ul><br />     <li id="softw" title="link to software"><a href="#">Software</a></li><br />     <li id="hardw" title="link to hardware"><a href="#">Hardware</a></li><br />   </ul><br />...</pre>

<p>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.</p>

<p>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</p>
<pre> ul#navigation li a {<br /> border: 0;<br /> display: block;<br /> height: 25px;<br /> background: url(navigation.gif) no-repeat;<br />}<br /><br />ul#navigation li a:hover {<br /> border: 0;<br /> display: block;<br /> background-image: url(navigation_over.gif);<br />}<br /></pre>
<p>By using background positioning, width, height and "display:block"
we 'reveal' each button of the navigation. Here is an example of the
support button:</p>
<pre>li#support a {<br /> width: 67px;<br />}<br /><br />li#support a:link, <br />li#support a:visited, <br />li#support a:hover { <br /> background-position: -264px 0px;<br />}

What I wanted is that when you roll over the submenu that the image
of the first level is still in the rollover state. I have no idea if
this is possible, but I think it is, only have no idea how. If anyone
has suggestion please don't hesitate to share, thanks.

posted in: WebStandards |