CSS-Tricks Example

An Exploding CSS Menu

By CSS-Tricks


Here is the basic theory:


#menu li#one a, #menu li#one a:hover span {
  background-image: url(images/menu_1.jpg);

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


<div id="menu">
    <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>

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.