<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    if (!document.getElementsByTagName) return false;
    var sfEls = document.getElementById("nav").getElementsByTagName("li");

    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }

}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Next, you are going to to set up the navigation.  Check out the example code, then read the description of what it means below:

<div id="catnav">
  <div id="nav">

  <ul>
    <li><a href="http://yourdomain.com/">Home</a></li>
  </ul>

  <ul>
    <li><a href="http://yourdomain.com/page1/">Page One</a>
     <ul>
      <li><a href="http://yourdomain.com/page1sub1/">Page One Sub One</a></li>
      <li><a href="http://yourdomain.com/page1sub2/">Page One Sub Two</a></li>
     </ul>
    </li>
  </ul>

  <ul>
    <li><a href="http://yourdomain.com/page2/">Page Two</a>
     <ul>
      <li><a href="http://yourdomain.com/page2sub1/">Page Two Sub One</a></li>
      <li><a href="http://yourdomain.com/page2sub2/">Page Two Sub Two</a></li>
      <li><a href="http://yourdomain.com/page2sub1/">Page Two Sub Three</a></li>
     </ul>
    </li>
  </ul>

  </div>
</div>

The first HOME link has no dropdown, just the initial link.  The next cluster has a main link and then 2 sub pages in the dropdown and the last one has three sub links.

You can modify the link paths and how many dropdown sub links that you require.  Just make really sure that the first part of the code cluster starts with an <li>, but the ending </li> doesn’t come until the bottom of the cluster.  This has screwed me over a couple of times and I’ll save you the trouble.

The last thing you will need is the CSS.

#catnav {
  	padding: 0;
  	clear: both;
 	height: 32px;
 	width: 1000px;
 	background: #000;
  	position: absolute;
  	top: 85px;
        z-index: 100;
}

#nav {
  	list-style: none;
  	margin: 0;
  	padding: 0;
	position: relative;
	z-index: 100;
}

#nav ul {
  	margin: 0;
  	padding: 0;
}

#nav li {
  	float: left;
 	margin: 0;
 	padding: 0;
	list-style: none;
}

#nav a {
  	display: block;
  	line-height: 32px;
 	margin: 0 20px;
  	padding: 0;
  	font-size: 14px;
  	color: #fff;
	font-weight: bold;
}

#nav li a:hover {
  	color: #fff;
  	text-decoration: underline;
  	display: block;
}

#nav li ul {
  	list-style: none;
  	position: absolute;
  	width: 150px;
  	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
  	left: auto;
}

#nav li li {
  	float: left;
  	margin: 0;
  	padding: 0;
 	width: 129px;
}

#nav li li a {
 	width: 129px;
  	height: 24px;
  	line-height: 24px;
  	color: #000;
  	border-bottom: 1px solid #000;
  	background: #c5c5c5;
  	margin: 0;
  	padding: 5px 20px 5px 15px;
}

#nav li li a:hover {
  	border-top: 1px solid #131f27;
  	background: #000;
  	padding: 5px 20px 5px 15px;
}

#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
  	position: static;
}

Obviously, you can and will modify this to make it fit for your site, but this should get you started.

So how do I do it?

Simple CSS and animated gifs.

First, make an animated gif the size of you nav button:

Next, a little CSS:

#nav {
    height: 35px;
    width: 500px;
}

div.button {
    float: left;
    width: 100px;
    height: 35px;
    margin: 0 3px 0 0;
    background: #fff;
    border: 1px solid #000;
}

div.button a {
    display: block;
    margin: 0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font: bold 13px Georgia, serif;
    color:#039;
    text-decoration: none;
    background: #fff;
}

div.button span {
    display: block;
    margin:0;
    padding: 9px 0 0 0;
    text-align: center;

}

div.button a:hover {
    background: url( 'http://itscalledwebdesign.com/files/gif_hover/bg03.gif' ) top center no-repeat;
    color: yellow;
}

Next, the following div is placed:

<div id="nav">
    <div class="button"><a href="#"><span>Nav 1</span></a></div>
    <div class="button"><a href="#"><span>Nav 2</span></a></div>
    <div class="button"><a href="#"><span>Nav 3</span></a></div>
</div>

You are pretty much just making a div and placing the animated gif as the image for the hover.  In this example, the “a” simply has a white background.

CLICK HERE to see how it looks, it’s the “Fast” example.

View the CSS and source of that example page to see that the other examples are set up using the same code.  You just need to use different animated GIFs as the hover image.

One thing you need to think about is the possibility that animations are turned off on the users computer.  The only problem this might cause will be if you have your hovered text turn into the same color as the original background.  That would then cause the text to disappear.

I would suggest trying it with the animation turned on and off just to see what it would look like.

So there you have it.  Simple, quick CSS animated hovers.