在IE浏览器中的CSS下拉菜单

我有我的CSS导航，因此悬停在主导航上<ul>父母出现<li>。够简单。它适用于除IE以外的所有浏览器。我无法弄清楚为什么。在IE浏览器中的CSS下拉菜单

这里是CSS和HTML：

HTML：

<ul> 
    <a href="#" class="nav"><li id="first">Home</li></a> 
    <a href="#" class="nav"><li id="second">About 
     <ul>     <a href="#1"><li>Who Am I?</li></a> 
      <a href="#2"><li>My Mission</li></a> 
      <a href="#3"><li>Portfolio</li></a> 
     </ul> 
    </li></a> 
    <a href="#" class="nav"><li id="third">Toy Box 
     <ul> 
      <a href="#"><li>Projects</li></a> 
      <a href="#"><li>Toys</li></a> 
     </ul> 
    </li></a> 
    <a href="#" class="nav"><li id="fourth">Contact</li></a> 
    <a <?php if(isset($_SESSION['id'])){ echo "href='editProfile.php'"; }else{ echo "href='login.php'"; } ?> class="nav"><li id="fifth">Account 
     <?php 
     if(!isset($_SESSION['id'])){ 
     ?> 
     <ul> 
      <a href="login.php"><li>Log-In</li></a> 
      <a href="register.php"><li>Register</li></a> 
     </ul> 
     <?php 
     }else{ 
     ?> 
     <ul> 
      <a href="editProfile.php"><li>Edit Profile</li></a> 
      <a href="logout.php"><li>Log-Out</li></a> 
     </ul> 
     <?php 
     } 
     ?> 
    </li></a> 
    <div class="clear"></div> 
</ul>

CSS：（更少的格式）

ul{ 
     list-style-type: none; 

     li{ 
      position: relative; 
      z-index: 2; 
      float: left; 
      width: 20%; 
      height: 100%; 
      margin: 0; 
      padding: 0; 

      font-size: 20px; 
      color: #FFF; 
      line-height: 35px; 
      text-align: center; 
      background-color: fade(#FFF, 15%); 
      .transition-duration(.5s); 

      ul{ 
       position: absolute; 
       width: 100%; 
       left: -9999px; 
       .transition-duration(.3s); 

       li{ 
        display: block; 
        width: 100%; 
        height: 35px; 
        line-height: 35px; 
        background-color: fade(#FFF, 40%); 
       } 
      } 

      &#first:hover{ 
       background-color: #4200AA; 
      } 
      &#second:hover{ 
       background-color: #003BB1; 
       ul{ 
        left: auto; 
        background-color: #003BB1; 
        .drop-shadow(0px, 2px, 4px, 3px, #111, 30%); 
        li{ 
         &:hover{ 
          background-color: lighten(#003BB1, 10%); 
         } 
        } 
       } 
      } 
      &#third:hover{ 
       background-color: #00BC48; 
       ul{ 
        left: auto; 
        background-color: #00BC48; 
        .drop-shadow(0px, 2px, 4px, 1px, #111, 30%); 
        li{ 
         &:hover{ 
          background-color: lighten(#00BC48, 5%); 
         } 
        } 
       } 
      } 
      &#fourth:hover{ 
       background-color: @yellow; 
       ul{ 
        left: auto; 
        background-color: @yellow; 
        .drop-shadow(0px, 2px, 4px, 1px, #111, 30%); 
        li{ 
         &:hover{ 
          background-color: lighten(@yellow, 10%); 
         } 
        } 
       } 
      } 
      &#fifth:hover{ 
       background-color: #E82B15; 
       ul{ 
        left: auto; 
        background-color: #E82B15; 
        .drop-shadow(0px, 2px, 4px, 1px, #111, 30%); 
        li{ 
         &:hover{ 
          background-color: lighten(#E82B15, 10%); 
         } 
        } 
       } 
      } 
     } 
    }

来源

2013-03-24 Zach Case

哪个IE版本？什么不工作？这只是过渡吗？在IE版本10以下版本中不支持。 – HerrSerker 2013-03-24 20:11:34

旧版本的IE不支持列表元素上的'：hover'。 – 2013-03-24 20:11:48

也许你应该尝试订购你的html？不允许直接在'ul'中插入'a'。它应该直接包含'li'，所以正确的列表看起来像'

'不像你做的那样。我敢打赌，旧版本的IE可能会遇到这样的问题。 – 2013-03-24 20:20:25

变化

<a href="#"><li></li></a>

要

<li><a href="#"></a></li>

，并设置a到display: block;和所需的大小。

来源

2013-03-24 20:32:03

使用此HTML具有相同的CSS

<ul> 
<a href="#" class="nav"><li id="first">Home</li></a> 
<a href="#" class="nav"><li id="second">About 
    <ul>     <a href="#1"><li>Who Am I?</li></a> 
     <a href="#2"><li>My Mission</li></a> 
     <a href="#3"><li>Portfolio</li></a> 
    </ul> 
</li></a> 
<a href="#" class="nav"><li id="third">Toy Box 
    <ul> 
     <a href="#"><li>Projects</li></a> 
     <a href="#"><li>Toys</li></a> 
    </ul> 
</li></a> 
<a href="#" class="nav" ><li id="fourth">Contact</li></a> 
<a <?php if(isset($_SESSION['id'])){ echo "href='editProfile.php'"; }else{ echo "href='login.php'"; } ?> <a href="#" class="nav"><li id="fifth">Account</li></a> 
    <?php 
    if(!isset($_SESSION['id'])){ 
    ?> 
    <ul> 
     <a href="login.php"><li>Log-In</li></a> 
     <a href="register.php"><li>Register</li></a> 
    </ul> 
    <?php 
    }else{ 
    ?> 
    <ul> 
     <a href="editProfile.php"><li>Edit Profile</li></a> 
     <a href="logout.php"><li>Log-Out</li></a> 
    </ul> 
    <?php 
    } 
    ?> 
</li></a> 
<div class="clear"></div>

来源

2013-03-24 20:15:35

没有改变任何东西。你能解释你改变了什么吗？因为我什么都看不到。 – 2013-03-24 20:20:54

您的“导航”帐户部分没有保存在任何标签下，因此它显示为在浏览器中显示。 – 2013-03-24 20:27:48

是的，它是PHP启动了一个标签，然后是李。然后李和一个关闭后我宣布下拉内容。 – 2013-03-24 20:29:18

在IE浏览器中的CSS下拉菜单

回答

相关问题