2011-03-14 33 views
0

我正在其他人制作的網站上工作,並且IE上的導航菜單存在一個錯誤。當您將鼠標懸停在下拉列表上時,該列表將落在圖片的後面,而不是落在圖片的下面。它在其他瀏覽器上看起來很好。該網站使用jQuery和另一個名爲Nav.js的庫,這兩者我幾乎都不知道。我假設有一個Z-索引需要調整的地方?我感謝您的幫助。Internet Explorer ul li背後圖像

編輯我無法發佈圖片,因爲我是新成員。你可以看到我的問題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); 
} 

回答

2

完全相同的問題,希望同樣的解決方案! http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

+0

感謝您的鏈接,但它似乎只適用於當你使用絕對定位。即使我把這些物品放在絕對的位置,它也不起作用。 – theitrain 2011-03-14 20:06:49

+0

我玩過這一些更多,它的工作,我只是沒有給予父元素既Z指數和絕對位置。救命恩,謝謝! – theitrain 2011-03-14 20:15:22

+0

我很高興這解決了你的問題!如果答案回答您的問題,請將其標記爲最終答案:) – rsplak 2011-03-14 21:54:22

1

我有同樣的問題,我不得不調整與菜單有關的所有conatiner div的z-index(在CSS中):例如。 #首頁& #menu等