IE10 Dropdown CSS不工作

我有一個下拉菜單，它是通過CSS懸停來激活的。但IE沒有做懸停命令。我試圖設置下拉菜單出現沒有懸停，這是可行的，但沒有:hover李會做任何事情。IE10 Dropdown CSS不工作

HTML：

  <div id="pilatesNav"> 
       <ul> 
        <li id="first" class="first mainNav"><a href="studio"><p>Studio</p></a> 
         <ul> 
          <li><a href="etiquette"><p>Etiquette</p></a></li> 
         </ul> 
        </li> 
        <li class="mainNav"><a href="about"><p>About</p></a> 
         <ul> 
          <li><a href="instructors"><p>Instructors</p></a></li> 
          <li><a href="testimonials"><p>Testimonials</p></a></li> 
          <li><a href="community"><p>Community</p></a></li> 
         </ul> 
        </li> 
        <li class="mainNav"><a href="classes"><p>Classes</p></a></li> 
        <li class="mainNav"><a href="beginners"><p>Beginners</p></a></li> 
        <li class="mainNav"><a href="schedule"><p>Schedule</p></a></li> 
        <li class="mainNav"><a href="videos"><p>Videos</p></a></li> 
        <li class="last mainNav"><a href="contact"><p>Contact</p></a></li> 
        <div class="clear"></div> 
       </ul> 
      </div>

CSS

#pilatesNav{ 
     width: 100%; 
     margin-bottom: 10px; 
     overflow: visible; 

     ul{ 
      list-style-type: none; 
      overflow: visible; 


      li{ 
       position: relative; 
       text-align: center; 
       z-index: 2; 
       float: left; 
       margin-right:85px; 
       overflow: visible; 

       a{ 
        display: block; 
        color: #666; 

        &:hover{ 
         color: lighten(@bg, 20%); 
        } 
       } 
       ul{ 
        position: absolute; 
        left: -9999px; 
        width: 137px; 
        text-align: center; 
        list-style-type: none; 
        background-color: @bg; 
        border-left: 1px solid darken(@bg, 10%); 
        border-right: 1px solid darken(@bg, 10%); 
        border-bottom: 1px solid darken(@bg, 10%); 
        .drop-shadow(0px, 6px, 5px, -7px, #111, 50%); 

        li{ 
         display: block; 
         a{ 
          display: block; 
         } 
         width: 100%; 
         padding: 5px 0px; 
         &:hover{ 
          a{ 
           color: lighten(@bg, 20%); 
          } 
          &:before{ 
           width: 0; 
           height: 0; 
          } 
          .gradient(@bg, darken(@bg, 6%), @bg); 
         } 
        } 
       } 
       &:hover{ 
        &:before{ 
         position: absolute; 
         left: -15px; 
         content: ''; 
         height: 25px; 
         width: 5px; 
         background-color: transparent; 
         border-left: 1px solid darken(@bg, 10%); 
        } 
        ul{ 
         left: -15px; 
        } 
       } 
       &.first{ 
        text-align: left; 
       } 
       &.last{ 
        margin-right: 0px; 
        text-align: right; 
       } 
      } 
     } 
    }//End Nav

來源

2013-03-27 Zach Case

這是一個遠射，但你的doctype decleration是什麼？ – 2013-03-27 17:35:04

@ napo190哈哈，你知道嗎？當我刪除代碼來查找干擾代碼時，我發現我有兩個文檔類型，第一個甚至沒有完成。刪除了額外的文檔類型和BAM，它工作。發現它有趣只有IE瀏覽器打破了文檔類型。把這個作爲答案，我會接受它！謝謝。 – 2013-03-27 17:58:58

我有時會檢查是否有任何錯誤，請在Chrome中運行該網站。你是否使用開發者工具？它很棒，因爲它會吸收任何錯誤或警告。在你的情況下，我敢打賭鉻會拿起重複的文檔類型decleration並給你一個警告。 – 2013-03-27 18:03:39

檢查DOCTYPE聲明。

我在一個曾經在IE9中工作但在IE10中沒有工作的網站遇到麻煩，不得不更改爲標準<DOCTYPE !html>另外，爲了安全起見，請確認您所有的文檔類型聲明都是正確的，而不是重複的。

來源

2013-03-27 18:02:02

IE10 Dropdown CSS不工作

回答

相關問題