This is an interesting idea for a navigation menu.  This is a pure concept and I'm not sure if it would work with any site design but I learned everything I know about CSS from experimenting and coming up with useless ideas.  So, the idea is that the menu bar looks normal till you hover over it.  Once you have over it, all the links appear to blur while the item that is being hovered over remains the same.  This is how I choose to implement this, however, you could make the non-selected items smaller, change color, or even rotate.  The possibilities are endless, so experiment with it and let me know what interesting things you come up with.

btn Step 1: Create your images for the menu. In this case I am using images because I wanted a blurring effect, if you just want to do simple text manipulation then there is no need for images. The image should look something like the image on the left.  Refer to my previous post to understand why both states are in one image.

STEP 2: Now it is time to create the HTML which is pretty straight forward.  I have simplified it, so some it is not an optimized menu but you should be able to get the idea. It consists of a simple div container with the links placed inside.

   1:  <div id="nav">
   2:       <a href="#" id="LINK1">LINK</a>
   3:       <a href="#" id="LINK2">LINK</a>
   4:       <a href="#" id="LINK3">LINK</a>
   5:       <a href="#" id="LINK4">LINK</a>
   6:  </div>

STEP 3: Now comes the magic, it is time to create the styles for the links.  You can implement these in line or in a style sheet.  There are three main styles to implement.  The default style for the link, the hover style for the container, and the hover style for the links inside the container.  One strange thing that I have done is set the text-indent property to -9999999px.  What this does is is allow me to have the link text for SEO but also not have it displayed on top of the images.

   1:  <style type="text/css">
   2:       #nav a 
   3:       { 
   4:            text-indent: -999999px; text-decoration:none; display:block; 
   5:            height:50px; width:100px; background: URL('images/btn.png'); float:left; 
   6:       }
   7:       #nav:hover a {background-position:0 -50px;}
   8:       #nav a:hover {text-decoration: underline; background-position:0 0;}
   9:  </style>