<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>