CSS-Tricks Example



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>


Disclaimer: Feel free to download this and use it however you want. Be warned this hasn't been tested in every possible browser combination out there. Also, it might help to be a little more careful with your Photoshopping than I was.