下拉菜單css3菜單在IE10中不工作

這是我的代碼，它在IE 10中無法正常工作，但是，它在谷歌瀏覽器中完美工作。我感謝您的幫助。提前致謝。下拉菜單css3菜單在IE10中不工作

<ul id="css3_menu"> 
    <li><a href="#">Home </a></li> 
    <li><a href="#">Juniors </a> 
    <ul> 
    <li><a href="#">Coursebook</a></li> 
    <li><a href="#">Novels for Juniors</a> 
    <ul> 
    <li> <a href="#">William Thackeray </a> 
    <ul> 
    <li> <a href="#">Vanity Fair</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">Charles Dickens</a> 
    <ul> 
    <li> <a href="#">Hard Times</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">Leo Tolstoy</a> 
    <ul> 
    <li> <a href="#">Anna Karenina</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">Oscar Wilde</a> 
    <ul> 
    <li> <a href="#">The Picture of Dorian Gray</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">Thomas Hardy</a> 
    <ul> 
    <li> <a href="#">Tess of the d’Urbervilles</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">H. G. Wells</a> 
    <ul> 
    <li> <a href="#">The War of the Worlds</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    <li><a href="#">Lecture I</a></li> 
    <li><a href="#">Lecture II</a></li> 
    <li><a href="#">Lecture III</a></li> 
    <li><a href="#">Lecture IV</a></li> 
    <li><a href="#">Lecture V</a></li> 
    <li><a href="#">Lecture VI</a></li> 
    </ul>  
</li> 
<li><a href="#">Contact us</a></li></li></ul>

來源

2014-01-06 user3165567

我縮進你的HTML，使其顯示在問題的代碼，但是你還需要包括你的CSS代碼。 – Spudley

你應該包括你的CSS和你的JavaScript – zgood

請檢查下面的第二個答案，它是我使用的代碼。 – user3165567

我沒能在IE10測試，但我注意到有在最後一關li標籤。看看這個代碼將工作：

<ul id="css3_menu"> 
    <li><a href="#">Home </a></li> 

    <li><a href="#">Juniors </a> 
     <ul> 
      <li><a href="#">Coursebook</a></li> 
      <li><a href="#">Novels for Juniors</a> 

       <ul> 

        <li> <a href="#">William Thackeray </a> 
         <ul> 
          <li><a href="#">Vanity Fair</a></li> 
         </ul> 
        </li> 

        <li> <a href="#">Charles Dickens</a> 
         <ul> 
          <li><a href="#">Hard Times</a></li> 
         </ul> 
        </li> 

        <li> <a href="#">Leo Tolstoy</a> 
         <ul> 
          <li><a href="#">Anna Karenina</a></li> 
         </ul> 
        </li> 

        <li> <a href="#">Oscar Wilde</a> 
         <ul> 
          <li> <a href="#">The Picture of Dorian Gray</a></li> 
         </ul> 
        </li> 

        <li> <a href="#">Thomas Hardy</a> 
         <ul> 
          <li><a href="#">Tess of the d’Urbervilles</a></li> 
         </ul> 
        </li> 

        <li> <a href="#">H. G. Wells</a> 
         <ul> 
          <li><a href="#">The War of the Worlds</a></li> 
         </ul> 
        </li> 

       </ul> 

      </li> 
      <li><a href="#">Lecture I</a></li> 
      <li><a href="#">Lecture II</a></li> 
      <li><a href="#">Lecture III</a></li> 
      <li><a href="#">Lecture IV</a></li> 
      <li><a href="#">Lecture V</a></li> 
      <li><a href="#">Lecture VI</a></li> 
     </ul>  
    </li> 

<li><a href="#">Contact us</a></li> 
</ul>

來源

2014-01-06 15:01:20 Digger

感謝您的回覆，但這裏是我的博主linnk，請檢查下拉菜單，它在谷歌瀏覽器中工作，但不在IE中。即使我嘗試了你試圖修復的代碼。 www.ferxaz.com – user3165567

這裏是代碼：

#css3_menu { 
    width: 960px; 
    margin: 0px auto; 
    border: 1px solid #333; 
    border-top:none!important; 
    background-color: #333; 
    -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; 
    -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; 
    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; 
} 

#css3_menu, #css3_menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 


#css3_menu:before, 
#css3_menu:after { 
    content: ""; 
    display: table; 
} 

#css3_menu:after { 
    clear: both; 
} 


#css3_menu li { 
    float: left; 
    border-right: 1px solid #111; 
    -moz-box-shadow: 1px 0 0 #444; 
    -webkit-box-shadow: 1px 0 0 #444; 
    box-shadow: 1px 0 0 #444; 
    position: relative; 
} 

#css3_menu a { 
    float: left; 
    padding: 15px 30px; 
    color: #979797; 
    letter-spacing: 4; 
    text-transform:inherit; 
    font-family: Verdana, Helvetica; 
    font-size: 14px; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 

#css3_menu li a:hover { 
    background: #333; 
} 

#css3_menu li:hover > a { 
    color: #fafafa; 
} 

*html #css3_menu li a:hover { /* IE6 only */ 
    color: #fafafa; 
} 

#css3_menu ul { 
    margin: 20px 0 0 0; 
    _margin: 0; /*IE6 only*/ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 47px; 
    left: 0; 
    z-index: 1;  
    background: #333; 
    -moz-box-shadow: 0 -1px rgba(255,255,255,.3); 
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
} 
#css3_menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

#css3_menu ul ul { 
    top: 0; 
    left: 174px; 
    margin: 0 0 0 20px; 
    _margin: 0; /*IE6 only*/ 
    -moz-box-shadow: -1px 0 0 rgba(210,210,210,.2); 
    -webkit-box-shadow: -1px 0 0 rgba(210,210,210,.2); 
    box-shadow: -1px 0 0 rgba(210,210,210,.2);   
} 

#css3_menu ul li { 
    float: none; 
    display: block; 
    border: 0; 
    _line-height: 0; /*IE6 only*/ 
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
    box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
} 


#css3_menu ul a {  
    padding: 12px; 
    width: 150px; 
    color: #979797; 
    _height: 12px; /*IE6 only*/ 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 

#css3_menu ul a:hover { 
    background-color:#3d3d3d; 
    color: #fff; 

}

來源

2014-01-07 18:47:42 user3165567

下拉菜單css3菜單在IE10中不工作

回答

相關問題