An Exploding CSS Menu

By CSS-Tricks

[DOWNLOAD EXAMPLE]

Here is the basic theory:

CSS:

#menu li#one a, #menu li#one a:hover span {
  background-image: url(images/menu_1.jpg);
  height:27px;
  width:161px;
}

#menu li#one a:hover span {
  display: block;
  position: relative;
  height: 73px;
  top: -46px;
  z-index: 1;
  background-position: center top;
}
etc...

HTML:

<div id="menu">
  <ul>
    <li id="one"><a href="/"><span><em>One</em></span></a></li>
    <li id="two"><a href="/"><span><em>Two</em></span></a></li>
    <li id="three"><a href="/"><span><em>Three</em></span></a></li>
    <li id="four"><a href="/"><span><em>Four</em></span></a></li>
    <li id="five"><a href="/"><span><em>Five</em></span></a></li>
  </ul>
</div>