这是为什么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 /李 - 尝试改变ul class"navtest"到div class="navtest"，并删除左&右键菜单的li ...

Answer 2

我相信你的问题是与ul#nav-test元素。出于某种原因，您有一个ul嵌套在li内ul。这是一个错误还是你有这样做的原因？

见行92：

<ul class="navtest" > 
    <li> 
     <ul> 
      <li><a href="catalog_gallery.php">Fall Catalog</a></li> 
      <li><a href="http://www.sackling.com/contact.php">Contact us</a></li> 
     </ul> 
    </li> 
</ul> 

移除多余的ul，这可能会解决你的问题，因为IE7被分配一个16像素从第二ul的顶偏。

所以你的HTML变为：

<ul class="navtest" > 
    <li><a href="catalog_gallery.php">Fall Catalog</a></li> 
    <li><a href="http://www.sackling.com/contact.php">Contact us</a></li> 
</ul>