1. CSS Navigation
a couple of tricks

2. the basic idea
http://css.maxdesign.com.au/listamatic/horizontal04.htm

3. <div id="navcontainer">
<ul id="navlist">
<li id="active”>
<a href="#" id="current">Item one</a>
</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
html

4. <style>
#navlist{padding: 0 1px 1px;margin-left: 0;font: bold 12px Verdana, sans-
serif;}
#navlist li{list-style: none;margin: 0;border-top: 1px solid gray;display:
inline;}
#navlist li a{padding: 0.25em 0.5em 0.25em 0.75em;border-left: 1em solid
#AAB; background: #CCD; text-decoration: none;}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover{border-color: #FE3;color: #FFF;background: #332;}
</style>
css

5. CSS SPRITES
FASTER, CLEANER, SUPERSEXY
CSS Sprites means using only one http image request to the
server to pull one image. This image is then moved around
to render the desired result

6. sprites

7. sprites

8. sprites

9. stepping it up with
background images

10. make an image sprite

11. <div id="nav">
<ul>
<li class="home”><a href="#">Home</a></li>
<li class="about”><a href="#">About Us</a></li>
<li class="services”><a href="#">Services</a></li>
<li class="contact”><a href="#">Contact Us</a></li>
</ul>
</div>
html

12. <style type="text/css">
#nav a { display: block; height: 30px; text-indent: -9999px;
background: url(lite_rollover.jpg) 0 0 no-repeat;}
#nav li { list-style: none; float: left; }
#nav li.home a { width:80px; background: url(lite_rollover.jpg) 0 0;}
#nav li.about a { width:100px; background: url(lite_rollover.jpg) -110px 0 ;
}#nav li.services a { width:100px; background: url(lite_rollover.jpg) -240px 0; }
#nav li.contact a { width:140px; background: url(lite_rollover.jpg) -360px 0; }
#nav li.home a:hover { background: url(lite_rollover.jpg) 0 -30px ; }
#nav li.about a:hover { background: url(lite_rollover.jpg) -110px -30px ; }
#nav li.services a:hover { background: url(lite_rollover.jpg) -240px -30px ; }
#nav li.contact a:hover { background: url(lite_rollover.jpg) -360px -30px ; }
</style>
css

13. links
Perfect Full Page Background Image
http://css-tricks.com/perfect-full-page-background-image/
How to Create a CSS Menu Using Image Sprites
http://line25.com/tutorials/how-to-create-a-css-menu-using-
image-sprites
CSS Sprite Generators
http://css-sprit.es/
http://spriteme.org/