Vertical menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #navsite p { display: none; } #navsite { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 0.7em; font-weight: bold; width: 12em; border-right: 1px solid #666; padding: 0; margin-bottom: 1em; background-color: #9cc; color: #333; } #navsite ul { list-style: none; margin: 0; padding: 0; } #navsite ul li { margin: 0; border-top: 1px solid #003; } #navsite ul li a { display: block; padding: 2px 2px 2px 0.5em; border-left: 10px solid #369; border-right: 1px solid #69c; border-bottom: 1px solid #369; background-color: #036; color: #fff; text-decoration: none; width: 100%; } html>body #navsite ul li a { width: auto; } #navsite ul li a:hover { border-left: 10px solid #036; border-right: 1px solid #69c; border-bottom: 1px solid #369; background-color: #69f; color: #fff; } </style> </head> <body> <div id="navsite"> <p>Site navigation:</p> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/writing/">Writing</a></li> <li><a href="/speaking/">Speaking</a></li> <li><a href="/contact/">Contact</a></li> </ul> </div> </body> </html>