<html> <head> <title>Div example</title> </head> <body> <style type="text/css"> .menu { font-family: verdana, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; width: 12em; } .menu ul { list-style: none; margin: 0; padding: 0; } .menu ul li { margin: 0; border-top: 1px solid #000000; } .menu ul li a { display: block; padding: 2px 2px 2px 5px; border-left: 10px solid #336699; border-bottom: 1px solid #336699; border-right: 1px solid #336699; background-color: #000040; color: #ffffff; text-decoration: none; width: 100%; } /* "html>body" is a childselector command which means: select any body element that is a child of a html element. IE does not understand the childselector and will skip this rule. This is needed for Firefox. */ html>body .menu ul li a { width: auto; } .menu ul li a:hover { border-left: 10px solid #002255; border-bottom: 1px solid #336699; border-right: 1px solid #669900; background-color: #c0c0ff; color: #ffffff; } </style> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Developers</a></li> <li><a href="#">Emulators</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>