Can you explain how this nav works?

can someone explain to me in simple terms how the left hand vertical arrow naivigation is controlled by CSS? I am totally confused and I would really appreciate your help!

The site is a wordpress site using pages rather than posts, http://www.staysafedriving.co.uk/

The arrows are background images on the li elements. The image is a sprite, showing the left side of the image, which is the red arrow. When you hover over the li, the background image is shifted to show you the right side of the image (which has the green arrow). Wordpress really sucks for seeing how CSS is done because the file pathnames are all arrrrrg over the place, but here it is
http://www.staysafedriving.co.uk/wp-content/themes/classic/images/arrowroll.gif

(as a note, this code is evil:


#navigation a:link, a:visited, a:active, a:hover {
  text-decoration: none;
  display: block;
  color: #ffffff;
}

please don’t imitate them and set display states based on the pseudo-class of the link! Just do “#navigation a” please. Notice they forgot :focus, because they don’t care about non-mouse users! Hello, laptop user here, we need keyboard functionality, :focus please!)

They then show and hide the submenu using an inaccessible, but popular, method:


#navigation ul li ul {
  display: none;
}

#navigation ul li:hover ul {
  display: block;
  position: relative;
  top: -60px;
  left: 223px;
  width: 200px;
}

Since this removes the entire submenu from users of popular screen readers, it means the menu is not reachable. A smarter method is to set all the settings/styles you want on the sub ul first, then just pull it offscreen with a negative left margin or left: -somenegativenumber (margin is somewhat nicer for IE6/7).

A generally better way of doing it is the Sons of Suckerfish method, though it’s got a few buggies of its own:
They say Opera needs a width, but they don’t say that width can be “width: auto” if you don’t want to set some explicit width.
IE7 needs a trigger to get :hover to work if you remove their Javascript and use something else to get IE6 to :hover (IE6 won’t hover on non-links without scripting help, and while SoS have the sfhover script in the <head>, there are other methods you could use… but without the trigger, IE7 will play stupid).

Beyond that, it’s simple and works in more places. Add in however many sprites you want and you too can have an uber-fancy menu! : )