<div id="header">
<div id="site-name">Site name</div>
<div id="search">
<form action="">
<label for="searchsite">Site Search:</label>
<input id="searchsite" name="searchsite" type="text" />
<input type="submit" value="Go" class="f-submit" />
</form>
</div>
<ul id="nav">
<li class="first"><a href="#">Home</a></li>
<li class="active"><a href="#">Products</a>
<ul>
<li class="first"><a href="#">Maecenas</a></li>
<li><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li class="last"><a href="#">Mauris at enim</a></li>
</ul>
</li>
<li><a href="#">Client list</a>
<ul>
<li class="first"><a href="#">Maecenas</a></li>
<li><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li class="last"><a href="#">Mauris at enim</a></li>
</ul>
</li>
<li><a href="#">Case Studies &amp; References</a>
<ul>
<li class="first"><a href="#">Maecenas</a></li>
<li><a href="#">Phasellus</a><!-- I am tring to add a new right menu here -->
<ul>
<li class="first"><a href="#">Mauris xxx</a></li>
<li><a href="#">Mauris solxxxxn</a></li>
<li class="last"><a href="#">Mauris xxxxxxx</a></li>
</ul>
</li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li class="last"><a href="#">Mauris at enim</a></li>
</ul>
</li>
<li class="last"><a href="#">Locations</a>
<ul>
<li class="first"><a href="#">Maecenas</a></li>
<li><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li class="last"><a href="#">Mauris at enim</a></li>
</ul>
</li>
</ul>
</div>

/* NAV - top horizontal nav */
#nav, #nav ul {padding: 0;margin: 0;list-style: none}
#nav {font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px}
#nav li {position:relative;background: #999;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #666;border-right: 3px solid #252525;padding:0}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none;cursor:pointer;color:#fff;display: block;padding: 4px 10px 2px}
#nav a:hover {color:#000}

#nav li ul {border-left: 1px solid #c00;background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em}
#nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}

#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
#nav li li.last {border-bottom:none}
#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#000;padding: 3px 10px 2px;width:14em}
#nav li li a:hover {color:#fff;background:#c00}

#nav li.active {background: #c00;border-bottom: 3px solid #c00}
#nav li.active ul {border:none;background: #c00 url("images/featurebox2_bg.gif") no-repeat 100% 100%}
#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
#nav li.active a:hover {color:#000}

#nav li.active li {border:none;border-top: 1px solid #c15c5c;border-bottom: 1px solid #870000}
#nav li.active li.last {border-bottom: none}
#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
#nav li.active li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff}

#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%}

/* hide from IE mac \*/
#nav li {width:auto}
/* end hiding from IE5 mac *

<ul id="nav">


<li><a href="#">Home</a></li>

<li><a href="#">Products</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Music</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</li>

<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Client List</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</li>

<li><a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Another Link</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</li>

<li><a href="#"
onmouseover="mopen('m4')"
onmouseout="mclosetime()">And Another</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</li>

</ul>
<div style="clear:both"></div>

</div>

#nav li{
margin-left: 0px;
list-style: none;
float:left;
padding-left: 30px;
width: auto;
background: yellow;
}

#nav a{
text-decoration: none;
color: blue;
font-size: 12pt;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
#nav a:hover{
text-decoration: none;
color: red;
font-size: 12pt;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
#nav div{
background: red;
width: 120px;
position: absolute;
visibility: hidden;
display: block;
}
#nav div a
{position: relative;
display: block;
margin: 0;
padding: 5px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
color: blue;
font: 12px Arial, Helvetica, sans-serif;
}

#nav div a:hover
{background: yellow;
display: block;
margin: 0;
padding: 5px;
color: blue;
font: 12px Arial, Helvetica, sans-serif;
text-align: left;
}

// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;