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