CSS submenu positioning - css

Question

is it possible to keep the position of the 2nd level billboard fixed to the top as opposed to moving down the page on hover?
Code
HTML
<ul id="nav">
<li>STUFF
<ul>
<li>STUFF
<ul>
<li>
<div>LINK LINK ></div>
</li>
</ul>
</li>
<li>STUFF
<ul>
<li>
<div>LINK LINK ></div>
</li>
</ul>
</li>
<li>STUFF
<ul>
<li>
<div>LINK LINK ></div>
</li>
</ul>
</li>
<li>STUFF
<ul>
<li>
<div>LINK LINK ></div>
</li>
</ul>
</li>
<li>STUFF
<ul>
<li>
<div>asdasdasd</div>
</li>
</ul>
</li>
<li>STUFF
<ul>
<li>
<div>asdasdasd</div>
</li>
</ul>
</li>
<li>STUFF
<ul>
<li>
<div>asdasdasd</div>
</li>
</ul>
</li>
</ul>
</li>
<li>STUFF
<ul>
<li>STUFF</li>
<li>STUFF</li>
</ul>
</li>
<li>STUFF
<ul>
<li>STUFF</li>
<li>STUFF</li>
</ul>
</li>
<li>STUFF
<ul>
<li>STUFF</li>
<li>STUFF</li>
</ul>
</li>
<li>STUFF
<ul>
<li>STUFF</li>
<li>STUFF</li>
</ul>
</li>
<li>STUFF
<ul>
<li>STUFF</li>
<li>STUFF</li>
</ul>
</li>
<li class="navblue">STUFF
<ul>
<li>STUFF</li>
<li>STUFF</li>
</ul>
</li>
<li class="navorange">STUFF</li>
</ul>​
CSS
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#nav, #nav ul {
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 30px;
margin: 0;
padding: 0;
}
#nav li > a {
font-weight: bold;
display: block;
margin-top: -1px;
color: #fff;
text-decoration: none;
background-color: #008000;
padding: 0 10px;
width: 99px;
border-bottom: 1px solid #FFFFFF;
}
#nav li > a:hover {
background-color: #99CC00;
color: #000;
}
#nav li {
float: left;
position: relative;
margin-right: 1px;
}
#nav ul {
position: absolute;
display: none;
width: 12em;
top: 2.5em;
}
#nav li ul a {
width: 160px;
height: auto;
float: left;
line-height: 30px;
font-size: 12px;
font-weight: normal;
}
#nav ul ul {
top: auto;
}
#nav ul ul {
height: 299px;
width: 652px;
margin: 0;
padding: 0;
background-color: #999999;
}
#nav ul ul li {
padding: 20px;
}
#nav li.navblue a {
background-color: #3398CC;
}
#nav li.navorange a {
background-color: #FF9A02;
color: #FEFF00;
}
#nav li ul ul {
left: 14.9em;
margin-left: -2px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
display: none
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block
}​
JavaScript/jQuery
window.addEvent('load', function () {
function mainmenu() {
$("#nav ul").css({display:"none"}); // Opera Fix
$("#nav li").hover(function () {
$(this).find('ul:first').css({visibility:"visible", display:"none"}).show(0);
}, function () {
$(this).find('ul:first').css({visibility:"hidden"});
});
}
$(document).ready(function () {
mainmenu();
});
})​
Live Example

Answer 1

replace your current css with this:
<style type='text/css'>
body {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#000000;}
#nav,#nav ul{list-style-type:none;list-style-position:outside;position:relative;line-height:30px;margin:0;padding:0;}
#nav li > a{font-weight:bold;display:block;margin-top:-1px;color:#fff;text-decoration:none;background-color:#008000;padding:0 10px;width:99px;border-bottom:1px solid #FFFFFF;}
#nav li > a:hover{background-color:#99CC00;color:#000;}
#nav li{float:left;margin-right:1px;}
#nav ul{position:absolute;display:none;width:12em;top:2.5em;}
#nav li ul a{width:160px;height:auto;float:left;line-height:30px;font-size:12px;font-weight:normal;}
#nav ul ul{top:0;}
#nav ul ul {height:299px;width:652px;margin:0;padding:0;background-color:#999999;}
#nav ul ul li {padding:20px;}
#nav li.navblue a{background-color:#3398CC;}
#nav li.navorange a{background-color:#FF9A02;color:#FEFF00;}
#nav li ul ul{left:14.9em;margin-left:-2px;}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul{display:none}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}
</style>
Changes: remove relative position from #nav li and position #nav ul ul top:0