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不工作

回答

相关问题