rendered paste body#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
width:800px;
text-align:center;
}
#nav a {
display: block;
width: 10em;
}
A:link, A:visited {
text-decoration:none;
}
#nav li {
float: left;
width: 10em;
width:200px;
background-color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FF0000;
height:30px;
border-bottom:medium solid #009999;
text-align:center;
vertical-align:middle;
}
#nav a:link,#nav a:visited {
float: left;
width: 10em;
width:200px;
background-color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FF0000;
height:30px;
border-bottom:medium solid #009999;
text-align:center;
vertical-align:middle;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#direction {
background-color:#CCCCCC;
width:800px;
}
<ul id="nav">
<li><a href="#">Community</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Help</a></li>
</ul>
</li>
<li><a href="#">Search</a>
<ul>
<li><a href="#">Name...</a></li>
<li><a href="#">Address...</a></li>
<li><a href="#">Telephone...</a></li>
<li><a href="#">Postcode...</a></li>
<li><a href="#">Domain...</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">E-mail Lookup</a></li>
<li><a href="#">Future Service</a></li>
<li><a href="#">Future Service</a></li>
<li><a href="#">Future Service</a></li>
<li><a href="#">Future Service</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">E-mail Us</a></li>
<li><a href="#">Advertisers</a></li>
<li><a href="#">Complain</a></li>
<li><a href="#">Policys</a></li>
</ul>
</li>
</ul>