why is this css menu overlapping the banner in IE7 - html

Question

Here is the page I am working on: http://www.sackling.com/new_arrivals.php
It seems to look good in all browsers except ie7.
I can't seem to figure out a way to make it work properly in all browsers it must be something with the way I am trying to stack my divs..
This is the important css:
#menuwrap {
width:940px;
height:84px;
position:relative;
z-index:99999;
}
.top_menu_container {height:60px;}
.menu_holder {width:980px; z-index:9999;}
.menu_right_bottom {width:220px; }
/*Menu Start */
.navtest{list-style:none;}
.navtest ul li {
display: block;
position: relative;
float: left;
cursor:pointer;
z-index:9999;
position:static;
}
.navtest ul li a {
text-transform:uppercase;
font-size: 11px;
display: block;
text-decoration: none;
color: #3F3F41;
padding: 5px 21px 5px 20px;
margin-left: 1px;
white-space: nowrap;
z-index:9999;
font-weight:normal;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.navtest ul li ul { opacity:0.80; width:141px; display:none; }
.navtest ul li:hover ul{ display: block; position: absolute; z-index:9999; }
.navtest ul li:hover li { float: none; z-index:9999;}
.navtest ul li:hover a { background: #fff; z-index:9999; color: #999; } /* main menu rollover color change */
.navtest ul li a:active {text-shadow: 0px 0px 0px rgba(0,0,0,0);} /*main menu click */
.navtest ul li:hover li a:hover { background: #c0c1c0; z-index:9999;} /*hover over background of dropdown */
.navtest ul li:hover ul li a {color:#000;} /* color of drop down on main rollover */
.top_buttons .navtest ul li a { font-size: 10px; } /* top menu row font */
*{margin:0; padding:0;}
body { margin: 0 auto; font-size: 13px; color: #333333; }
html, body { color: #000000; margin:0; padding:0; height:100%; font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",Verdana,"Verdana Ref",sans-serif; }
.header_space { height: 15px;; clear: both; width:940px; margin:0 auto;}
.wrapper {width:940px; margin-left:20px; margin-right:20px; background:#fff; overflow:hidden; margin:0 auto; }
.container {min-height:100%; height: auto !important; height:100%; margin: 0 auto -25px; width:980px; background:URL(images/bg_sides.jpg) repeat-y #f4f4f4; }
.contentContainer {width:980px;}
.banner_listings {margin:0; padding:0; height:293px; width:940px;}
.category_product_style {padding:10px 0px 0px 13px;}
#account_content {background: url(/images/account_nav_bg.png) repeat-x left top; margin-top:35px;}
/* =Account nav */
#account_nav {margin-bottom:55px; margin-top:35px; background: url(/images/account_nav_bg.png) repeat-x left top; float: left; width: 180px;}
#account_nav h2, .table_legend h2, #account_credits h2 { font-size:125%;}
/***********header stuff ************************/
.styled-select {padding-top:6px;}
#searchwrapper {
width:246px; /*follow your image's size*/
height:26px;/*follow your image's size*/
background:#ccc;
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchwrapper form { display:inline ; }
.searchbox {
border:none; /*important*/
background-color:transparent; /*important*/
background-image:url(images/blank_search.gif);
position:absolute; /*important*/
top:7px;
left:9px;
width:225px;
height:14px;
color:#fff;
font-size:14px;
margin:0px;
}
.searchbox_submit {
border:none; /*important*/ /*important*/
background: url(images/searcharrow.jpg) no-repeat;
position:absolute; /*important*/
top:3px;
left:225px;
width:15px;
height:20px;
margin:0px;
}

Answer 1

Try removing all whitespaces within the ul's in the menu - IE7 renders 2 spaces just above the first menu.
EDIT: i think it's the redundant ul/li - try changing ul class"navtest" to div class="navtest", and remove the li in the left & right menu...

Answer 2

I believe your issue is with the ul#nav-test element. For some reason you have a ul nested within an li within a ul. Was this a mistake or have you done this for a reason?
See line 92 :
<ul class="navtest" >
<li>
<ul>
<li>Fall Catalog</li>
<li>Contact us</li>
</ul>
</li>
</ul>
Remove the additional ul and this will probably resolve your issue as IE7 is assigning a 16px offset from the top of the second ul.
So your HTML becomes:
<ul class="navtest" >
<li>Fall Catalog</li>
<li>Contact us</li>
</ul>