Drop Down Menu not displaying properly in IE6 and IE7

Here is the link of the site I'm working right now. http://www.mensjewelrysite.com/

The drop-down at the About tab displays underneath the slideshow. I've tried removing the slide show still it display underneath.

Here is the html code
<code>
<ul>
<li><a href="index.html" title="Home">home</a></li>
<li class="alt"><a href="about.html" title="About">about</a>
<ul>
<li><a href="about.html" title="About">about</a></li>
<li><a href="product.html" title="Product Lines">product lines</a></li>
<li><a href="artwork_design.html" title="Artwork and Design">artwork and design</a></li>
<li><a href="affiliate_program.html" title="Affiliate Program">affiliate program</a></li>
<li><a href="process.html" title="Process">process</a></li>
<li><a href="faqs.html" title="FAQs">FAQs</a></li>
</ul>
</li>
<li><a href="class_ring.html" title="Class Ring">class ring</a></li>
<li class="alt"><a href="championship_ring.html" title="Championship Ring">championship ring</a></li>
<li><a href="military_ring.html" title="Military Ring">military ring</a></li>
<li class="alt"><a href="fashion_jewelry.html" title="Fashion Jewelry">fashion jewelry</a></li>
<li><a href="medical_jewelry.html" title="Medical Jewelry">medical jewelry</a></li>
<li class="alt"><a href="mens_jewelry.html" title="Men's Jewelry">men's jewelry</a></li>
<li><a href="puzzle_ring.html" title="Puzzle Ring">puzzle ring</a></li>
<li class="alt"><a href="skull_ring.html" title="Skull Ring">skull ring</a></li>
<li><a href="spinning_ring.html" title="Spinning Ring">spinning ring</a></li>
<li class="alt"><a href="stamped_rings.html" title="Stamped Ring">stamped ring</a></li>
<li><a href="wedding_rings.html" title="Wedding Ring">wedding ring</a></li>
<li class="alt"><a href="contact.html" title="Contact Us">contact us</a></li>
</ul>
</code>

The CSS
<code>
#nav ul {
margin: 3px 0 10px;
}
#nav li {
border-bottom: 1px solid #d9d9d9;
position: relative;
}
#nav li:first-child {
border-top: 1px solid #d9d9d9;
}
#nav li.sub {
padding-left: 10px;
}
#nav li a {
background: #ede6c8 url(../images/nav_bg.gif) no-repeat 174px center;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #080b0d;
display: inline-block;
font: normal 0.75em Verdana;
height: 15px;
padding: 5px 13px;
text-decoration: none;
text-transform: capitalize;
width: 169px;
}
* html #nav li a {
margin-bottom: -4px;
}
*:first-child+html #nav li a {
margin-bottom: -4px;
}
#nav li.alt a {
background-color: #fff;
}
#nav li.alt a:hover, #nav li a:hover, #nav li a.active, #nav li:hover a {
background: url(../images/nav_ro.gif) no-repeat 0 0;
color: #fff;
}
#nav li:hover li a {
background: #fff url(../images/nav_bg.gif) no-repeat 174px center;
color: #080b0d;
}
#nav ul ul {
position: absolute;
top: -1px;
left: 195px;
z-index: 200;
margin-top: 0;
}
* html #nav ul ul {
position: relative;
left: 195px;
top: 0;
z-index: 200;
}
#nav ul ul li {
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
position: relative;
}
</code>

And the JavaScript I used,
<code>
function mainmenu(){
$(" #nav ul ul ").css({display: "none"}); // Opera Fix
$(" #nav ul 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();
});
</code>