<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en">
<head>
<title>test</title>
<style type="text/css">
ul{
list-style:none;
width:10%;
padding:0;
}
li{background-color:#ff0000;color:#0000ff} li:hover{background-color:#0000ff;color:#ff0000}
a{text-decoration:none} /*get rid of underline*/
.vdropdown{
display:none;
position:absolute;
margin-left:9%;
}
li:hover .vdropdown{display:block}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul class="vdropdown">
<li class="vdropdown"><a href="#">History</a></li>
<li class="vdropdown"><a href="#">Team</a></li>
<li class="vdropdown"><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul class="vdropdown">
<li class="vdropdown"><a href="#">Web Design</a></li>
<li class="vdropdown"><a href="#">Internet Marketing</a></li>
<li class="vdropdown"><a href="#">Hosting</a></li>
<li class="vdropdown"><a href="#">Domain Names</a></li>
<li class="vdropdown"><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul class="vdropdown">
<li class="vdropdown"><a href="#">United Kingdom</a></li>
<li class="vdropdown"><a href="#">France</a></li>
<li class="vdropdown"><a href="#">USA</a></li>
<li class="vdropdown"><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
It works, except the submenus appear at the bottom of the <li> hovered to activate them, instead of starting at the same level as the <li>.