html - 为什么这个 css 菜单与 IE7 中的横幅重叠

Question

这是我正在处理的页面:http://www.sackling.com/new_arrivals.php

它似乎在除 ie7 之外的所有浏览器中看起来都不错。

我似乎无法找到一种方法让它在所有浏览器中正常工作它一定与我尝试堆叠我的 div 的方式有关..

这是重要的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

尝试删除菜单中 ul 内的所有空格 - IE7 在第一个菜单正上方呈现 2 个空格。

编辑:我认为这是多余的 ul/li - 尝试将 ul class"navtest" 更改为 div class="navtest"，并删除 li 在左右菜单中...