Nested Drop Down Menu Alignment - html

Question

I've spent a few days already finding a way to evenly space variable sized menu items across a fixed width horizontal bar, and finally found a jquery solution detailed here. The problem I now have is that my nested drop-down menus appear quite differently in different browsers and I very simply need them to drop down from their respective li anchors properly.
This is the site in question
So far it looks ok on firefox. In Internet Explorer the dorp down menu's are pushed over to the right, and in Safari they are pushed over to the left. I've tried a number of things, but I think it's beyond me at the moment.
here's the relevant HTML & CSS, although you can view source on the site too:
<nav>
<ul id="main-nav">
<li>Home</li>
<li>Products
<ul>
<li>Wood Wool</li>
<li>Wood Wool Bales</li>
<li>Wood Wool Rope</li>
<li>Coloured Wood Wool</li>
</ul>
</li>
<li>Applications
<ul>
<li>Hamper Packaging</li>
<li>Wine & Champagne</li>
<li>General Gifts</li>
<li>Soaps & Cosmetics</li>
<li>Shellfish Packaging</li>
<li>Stable Bedding</li>
<li>Industrial</li>
<li>Pesticide Alternative</li>
</ul>
</li>
<li>What's Wood Wool?</li>
<li>The Eco Bit</li>
<li>Get in touch</li>
<li>Blog</li>
</ul>
</nav>
/* NAVIGATION BAR */
header nav{
background-image: url(../_images/nav-bar-bg.png);
height: 48px;
width: 960px;
position: absolute;
top: 96px;
}
header nav #main-nav{
width:900px;
margin-left:30px;
}
header nav ul li {
display:block;
float: left;
}
header nav ul li a {
display:inline-block;
height:48px;
line-height:48px;
text-decoration: none;
color: white;
font-weight:normal;
font-size:16px;
}
header nav ul li a:hover {
color: #09b497;
text-shadow:2px 2px 2px #000;
}
/* NESTED MENU OPTIONS */
header nav ul li ul {
position:absolute;
float: left;
visibility: hidden;
top:40px;
height:auto;
border:2px solid #0a7c6c;
background-color:#FFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
header nav ul li:hover ul {
visibility: visible;
}
header nav ul li ul li {
display:block;
height:30px;
float:left;
clear:left;
}
header nav ul ul li a{
padding: 0 12px;
line-height:30px;
text-align:left;
font-size:14px;
color:#0a7c6c;
}
header nav ul ul li a:hover{
color: #09b497;
text-shadow:none;
}

Answer 1

Add position:relative to your header nav ul li. Your header nav ul li ul has it's position set to absolute so it should be absolute with respect to it's parent.
Forgot to add, you'll also need to add a width to the header nav ul li ul or atleast a min-width.