由于某种原因，z-index 仅在 ie7 中无法正常工作。但是，如果我从 #header 中删除 position:fixed ，它可以正常工作，因为此菜单将固定在页面顶部，这是需要的。下拉显示，但仅在底部边框上方，下方没有任何内容。想不通这个
<!-- start fixed header container -->
<div id="header_container">
<!-- start header -->
<div id="header">
<!-- start container -->
<nav>
<div class="container">
<div id="logo">logo here</div>
<div id="top_menu">
<ul>
<li><a href="/#">Features</a>
<div class="drop">
<div>
<ul>
<li class="title"><a href="/#1">heading with link</a></li>
<li><a href="/#1">testing 1</a></li>
<li><a href="/#2">testing 2</a></li>
<li><a href="/#3">testing 3</a></li>
</ul>
<ul>
<li class="title"><a href="/#1">and another heading</a></li>
<li><a href="/#1">testing 1</a></li>
<li><a href="/#2">testing 2</a></li>
<li><a href="/#3">testing 3</a></li>
</ul>
</div>
<div class="extra">
<ul>
<li class="title">heading with NO link</li>
<li><a href="/#4">testing 4</a></li>
<li><a href="/#5">testing 5</a></li>
<li><a href="/#6">testing 6</a></li>
</ul>
<ul>
<li class="title">plain info description goes as far as I want <br />with no link blah blah blah blah blah</li>
</ul>
</div>
</div>
</li>
<li><a href="/#">Download</a></li>
<li><a href="/#">Purchase</a></li>
<li><a href="/#">Support</a>
<div class="drop">
<div>
<ul>
<li class="title">How can we help you?</li>
<li><a href="/#1">FAQs</a></li>
<li><a href="/#2">How To Guides</a></li>
<li><a href="/#3">Online Documentation</a></li>
<li><a href="/#3">Contact Us</a></li>
</ul>
</div>
</div>
</li>
<li><a href="/#">Account Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- end container -->
<div class="header_shadow"></div>
</div>
<!-- end header -->
</div>
<!-- end header container -->
#header_container{
width:100%;
height:52px;
}
#header{
width:100%;
height:50px;
position:fixed;
border-bottom:2px #3c9ac4 solid;
background: #00457b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1e70b2), to(#00457b));
background-image: -webkit-linear-gradient(top, #1e70b2, #00457b);
background-image: -moz-linear-gradient(top, #1e70b2, #00457b);
background-image: -ms-linear-gradient(top, #1e70b2, #00457b);
background-image: -o-linear-gradient(top, #1e70b2, #00457b);
background-image: linear-gradient(top, #1e70b2, #00457b);
}
.ie8 #header, .ie9 #header{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e70b2', endColorstr='#00457b',GradientType=0 ) ;
}
.header_shadow{
width:100%;
height:10px;
position:absolute;
z-index:900;
display:none;
left:0;
top:52px;
background:url(/images/header_shadow.png) repeat-x;
}
/* Top Menu
================================================== */
#logo{
width:200px;
float:left;
}
/*menu container centered*/
#top_menu{
width:760px;
float:left;
}
/*entire menu ul*/
#top_menu ul{
position:relative;
z-index:1000;
margin:0;
float:right;
height:50px;
line-height:50px;
}
/*top link container*/
#top_menu ul li{
display:block;
float:left;
}
/*top link*/
#top_menu ul li a{
display:block;
color:#f1f1f1;
text-decoration:none;
padding:0 20px;
font-size:14px;
}
/*top link hover*/
#top_menu ul li:hover > a{
color: #f1f1f1;
background:#555555;
}
/*show dropdown and position under tab*/
#top_menu ul li:hover > .drop{
display:block;
top:auto;
}
/*drop down container*/
#top_menu ul li .drop{
position:absolute;
z-index:1000;
display:none;
padding:15px 0 0 0;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
background:#555555;
background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#202020));
background-image: -webkit-linear-gradient(top, #555555, #202020);
background-image: -moz-linear-gradient(top, #555555, #202020);
background-image: -ms-linear-gradient(top, #555555, #202020);
background-image: -o-linear-gradient(top, #555555, #202020);
background-image: linear-gradient(top, #555555, #202020);
font-size:13px;
}
.ie8 #top_menu ul li .drop{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#202020',GradientType=0 ) ;
}
.ie9 #top_menu ul li .drop{
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1ODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1NTU1NTUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMyMDIwMjAiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODIpIiAvPgo8L3N2Zz4=);
}
/*drop down div*/
#top_menu ul li .drop div{
float:left;
padding:0 30px 0 10px;
line-height:normal;
}
/*drop down div floated left*/
#top_menu ul li .drop div.extra{
/*border-left:1px #eeeeee solid;*/
}
#top_menu ul li .drop div .title, #top_menu ul li .drop div .title a{
padding:0 0 4px 0;
border:none;
color:#f1f1f1;
font-size:13px;
}
#top_menu ul li .drop div .title a:hover{
text-decoration:underline;
}
#top_menu ul li .drop div ul{
width:auto;
height:auto;
float:none;
background:none;
border:none;
margin:0 0 15px 0;
}
#top_menu ul li .drop div ul li{
float:none;
padding:1px 0 1px 0;
line-height:normal;
}
#top_menu ul li .drop div ul li:hover a{
background:none;
}
#top_menu ul li .drop div ul li a{
display:inline;
padding:0;
border:none;
color:#6cc5d8;
font-size:13px;
}
#top_menu ul li .drop div ul li a:hover{
text-decoration:underline;
}