sliding door menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>CosmoFarmer</title> <style type="text/css"> ul.mainNav { border-bottom: 2px solid #506BB1; margin: 20px; padding-left: 20px; float: left; width: 100%; } .mainNav li { list-style: none; float: left; background: #FFF url(sliding-door-images/right_side.png) no-repeat right top; margin-right: 5px; } .mainNav a { display: block; padding: 7px 15px 4px 15px; background-image: url(sliding-door-images/left_side.png); background-repeat: no-repeat; background-position: left top; text-align: center; text-decoration: none; color: #FFF; font-weight: bold; font-size: 1.2em; text-transform: uppercase; } .mainNav a:hover { color:#F90; } </style> </head> <body> <ul class="mainNav"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Experts</a></li> <li><a href="#">Quiz</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Horoscopes</a></li> </ul> </body> </html>