body
{
width:1024px;
margin:0 auto;
font-family: Arial, Helvatica and Sans-serif;
font-size:12px;
line-height:1.2;
/*background:#990000;*/
}
#menu
{
float:left;
background:#fff;
margin-left:128px;
/*border: 2px solid red;*/
padding:0 auto;
}
ul.nav
{
/*border:1px solid red;*/
float:left;
display:inline;
padding:0;
background: -moz-linear-gradient(bottom, #CC7A00 0%, #ff9900 100%);
border-radius:6px;
}
ul.nav li
{
display:inline;
list-style:none;
float:left;
/*border:1px solid #cccccc;*/
position: relative;
border-radius:6px;
}
ul.nav li a
{
float:left;
width:150px;
text-align:center;
padding-top:7px;
padding-bottom:7px;
text-decoration:none;
font-weight:bold;
color:#5f5f5f;
background: -moz-linear-gradient(bottom, #CC7A00 0%, #ff9900 100%);
border-radius:6px;
}
ul.nav li a:hover
{
background-color:#5f5f5f;
background: -moz-linear-gradient(bottom, #ff9900 0%, #CC7A00 100%);
color:#f5f5f5;
}
ul.nav ul
{
float:left;
list-style:none;
position:absolute;
border:1px solid red;
padding:0;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
background: -moz-radial-gradient(bottom, #CC7A00 0%, #ff9900 100%);
border-radius:6px;
}
ul.nav ul a, ul.nav ul li
{
background:none;
border-bottom:1px solid #9e6309;
}
ul.nav li:hover ul
{
left:0; /* Bring back on-screen when needed */
margin-top:29px;
*margin-top:28px;
border:0;
}
______________________________________________________________________
<!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">
<title>MENU TEST</title>
<link type="text/css" rel="stylesheet" href="menustyle.css" />
<body>
<div id="menu">
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul></li>
<li><a href="#">OUR PRODUCTS</a></li>
<li><a href="#">OUR CLIENTS</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul></li>
<li><a href="#">CONTACT US</a></li>
</ul><!--nav-->
</div><!--menu-->
</body>
</html>