CSS Dropdown в IE

Question

У меня есть моя навигация в CSS, поэтому наведите указатель мыши на главную навигацию <ul> в пределах родителя <li>. Достаточно просто. Он работает во всех браузерах, кроме IE. И я не могу понять, почему.

Вот 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%); 
         } 
        } 
       } 
      } 
     } 
    } 

Answer 1

Изменить

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

Для

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

И установить a в display: block; и нужный размер.

Answer 2

Используйте этот 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>