Question

我正在其他人建立的网站上工作，IE上的导航菜单存在错误。当您将鼠标悬停在下拉列表上时，列表会落后于图像而不是图像。它在其他浏览器上看起来很好。该网站正在使用jQuery和另一个名为Nav.js的库，这两个库我几乎都不知道。我假设有一个Z-Index可以调整到某个地方？感谢您的帮助。

修改我无法发布图片，因为我是新会员。您可以看到我的问题here。

这是HTML：

              <!-- #BeginLibraryItem "/Library/Nav.lbi" --><ul class="topnav">
            <li><a href="index.html">Home</a></li>
             <li><a href="surgical_treatments.html">Treatments</a>             
  <ul class="subnav">
                    <li><a href="hand_sweat.html">Sweaty Hands / Sweaty Palms</a></li>
                    <li><a href="facial_sweating.html">Facial Sweating</a></li>
                    <li><a href="facial_blushing.html">Facial Blushing</a></li>
                    <li><a href="axillary_sweating.html">Axillary Sweating</a></li>
              </ul>             
             </li>
  <li><a href="faq.html">FAQ</a>            </li>
  <li><a href="side_effects.html">Side Effects</a></li>
  <li><a href="alternatives.html">Alternative Treatments</a></li>

  <li><a href="hospitals.html">Hospitals</a></li>
  <li><a href="surgeons.html">Surgeons</a>
  <ul class="subnav">
                    <li><a href="dr_baumgartner.html">Dr. Fritz Baumgartner</a></li>
                    <li><a href="dr_bell.html">Dr. Roger Bell</a></li>
                    <li><a href="dr_cameron.html">Dr. Alan Cameron</a></li>
                    <li><a href="dr_connery.html">Dr. Cliff P. Connery</a></li>
                    <li><a href="dr_duarte.html">Dr. Jo&atilde;o B. V. Duarte</a></li>
                    <li><a href="dr_edelman.html">Dr. David S. Edelman</a></li>
                    <li><a href="dr_garcia-morato.html">Dr. Joaqu&iacute;n Garc&iacute;a-Morato</a></li>
                    <li><a href="dr_giudiceandrea.html">Dr. Alberto Giudiceandrea</a></li>
                    <li><a href="dr_konecny.html">Dr. Jiri Konecny</a></li>
                    <li><a href="dr_chien-chi-lin.html">Dr. Chien-Chi-Lin</a></li>
                    <li><a href="dr_mikhail.html">Dr. Peter Mikhail</a></li>
                    <li><a href="dr_revuelta.html">Dr. Jos&eacute; Revuelta</a></li>
                    <li><a href="dr_zeldin.html">Dr. Robert Zeldin</a></li> 
      </ul>             
  </li>
  <li><a href="payment_methods.html">Payment, Insurance</a></li>
  <li><a href="testimonials.html">Testimonials</a></li>
  <li><a href="hyper_contact_form.html">Contact Form</a></li>
  <li><a href="index.html"><img src="images/btn_english.jpg" alt="" border="0" /></a></li>
            <li><a href="espanol/index.html"><img src="images/btn_spanish.jpg" alt="" border="0" /></a></li>
            </ul>
<!-- #EndLibraryItem --><div id="slider">
   <img src="images/slide1.jpg" alt="" />
   <img src="images/slide2.jpg" alt=""/>
  </div>

CSS：

ul.topnav li ul.subnav { 
    z-index: 999;
    visibility:visible;
     }

     ul.topnav h3 {
         padding-left:10px;
         font-size:30px;
         }

ul.topnav {
    font-weight:bold;
    list-style: none;
    margin: 0;
    float: left;
    width: 975px;
    background: #222;
    font-size: 12px;
    background: url(../images/bg_topnav.jpg) repeat-x;
    padding-left: 5px;
    height: 35px;
}
ul.topnav li {
    font-weight:normal;
    float: left;
    margin: 0;
    position: relative; /*--Declare X and Y axis base--*/
    width: auto;
    padding-top: 3px;
    padding-right: 2px;
    padding-bottom: 0;
    padding-left: 0;
}
ul.topnav li a{
    font-weight:bold;
    padding: 10px 5px;
    color: #937600;
    display: block;
    text-decoration: none;
    float: left;
    font-size:13px;
}
ul.topnav li a:hover{
    font-weight:bold;
    color:#FFF;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: left;
    background: url(../images/btn_subnav.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0;
    top: 35px;
    background-color: #E0C60E;
    margin: 0;
    padding: 0;
    display: none;
    float: left;
    width: 240px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border: 1px solid #6606101;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #e7ca48; /*--Create bevel effect--*/
    border-bottom: 1px solid #cfb70f; /*--Create bevel effect--*/
    clear: both;
    width: 240px;
}
html ul.topnav li ul.subnav li a {
    float: left;
    width: 215px;
    padding-left: 20px;
    background:10px center;
    background-repeat:repeat-x; 
    background-image: url(../images/bg_subnavy.jpg);
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background:10px center;
    background-repeat:repeat-x; 
    background-image: url(../images/bg_subnavb.jpg); 
}

Answer 1

完全相同的问题，希望是同样的解决方案！ http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Answer 2

我有同样的问题，我必须调整与菜单相关的所有conatiner div的z-index（在css中）：例如。 #header＆amp; #menu等。

Internet Explorer ul li背后的图像

2 个答案: