Сгенерированный CSS CSS Dropdown с значками: hover

Question

Итак, я написал этот сценарий выпадающего списка для веб-сайта, но я не мог придумать, как заставить значки работать так, как они делают, используя современные стандарты, я знаю, что способ, которым я это делал в настоящий момент, - довольно плохая практика.

Что я сделал, это обычный всплывающий Navbar с раскрывающимся списком CSS, но поместите таблицу в элемент блока. Таким образом, что позволяет мне контролировать непрозрачность иконку с помощью CSS:

ul.Nav li a img { 
    opacity:0; 
    -webkit-transition:all 0.2s ease-in-out; 
    -moz-transition:all 0.2s ease-in-out; 
    -ms-transition:all 0.2s ease-in-out; 
    -o-transition:all 0.2s ease-in-out; 
    transition:all 0.2s ease-in-out; 
} 

ul.Nav li a:hover img { 
    opacity:1; 
} 

Это не работает в старых версиях IE и фактически ломает гиперссылок, так что пользователи не могут перемещаться. Сайт отлично работает в Chrome и Firefox, и вы можете просматривать веб-страницы, here

Это мой HTML/PHP код:

<ul class="Nav"> 
    <?php 
     for ($i = 0; $i < $numititles; $i++) { 
     echo "<li><a "; 
     if ($i == 0) {echo "style='border:none;width:".$navbutwidth."px;' ";} 
        echo "href='".$titles[$i][0][1]."'>" 
          ."<table style='padding:0px;border-spacing:0px;width:100%;'><tr><td>" 
          .  $titles[$i][0][0] 
          ."</td><td style='padding-right:15px;width:20px;'>" 
          ." <img src='/i/paw.png' style='width:20px;' alt='' />" 
          ."</td></tr></table></a>"; 
        $numjtitles = count($titles[$i]); 
        if ($numjtitles > 1) { 
         echo "<ul>"; 
         for ($j = 1; $j < $numjtitles; $j++) { 
          echo "<li><a "; 
          if ($i == 0) {echo "style='border:none;' ";} 
          echo "href='".$titles[$i][$j][1]."'>" 
            ."<table style='padding:0px;border-spacing:0px;width:100%;'><tr><td>" 
            .$titles[$i][$j][0] 
            ."</td><td style='padding-right:15px;width:20px;'>" 
            ." <img src='/i/paw.png' style='width:20px;' alt='' />" 
            ."</td></tr></table></a></li>"; 
         } 
         echo "</ul>"; 
        } 
        echo "</li>"; 
     } 
    ?> 
    </ul> 

..И вот мой полный CSS для выпадающего меню:

ul.Nav { 
    list-style-type:none; 
    margin:0 auto; 
    padding:0; 
    overflow:hidden; 
    width:auto; 
    z-index:80; 
} 

ul.Nav li { 
    float:left; 
} 

ul.Nav li a { 
    font-size:16px; 
    color:#FFF; 
    width:<?php echo ($navbutwidth-1); ?>px; 
    height:30px; 
    line-height:30px; 
    display:block; 
    text-decoration:none; 
    border-left:1px Solid #FFC; 
} 

ul.Nav li a table { 
    width:100%; 
    height:100%; 
} 

ul.Nav li a tr { 
    color:#FFF; 
    background-color:#960; 
    -webkit-transition:all 0.2s ease-in-out; 
    -moz-transition:all 0.2s ease-in-out; 
    -ms-transition:all 0.2s ease-in-out; 
    -o-transition:all 0.2s ease-in-out; 
    transition:all 0.2s ease-in-out; 
} 

ul.Nav li a tr:hover { 
    background-color:#C93; 
} 

ul.Nav li a td { 
    padding-left:15px; 
} 

ul.Nav li a img { 
    opacity:0; 
    -webkit-transition:all 0.2s ease-in-out; 
    -moz-transition:all 0.2s ease-in-out; 
    -ms-transition:all 0.2s ease-in-out; 
    -o-transition:all 0.2s ease-in-out; 
    transition:all 0.2s ease-in-out; 
} 

ul.Nav li a:hover img { 
    opacity:1; 
} 

ul.Nav ul { 
    list-style:none; 
    position:absolute; 
    left:-9999px; 
    text-align:left; 
    float:right; 
    display:block; 
    padding:0; 
    min-width:9.3ex; 
    opacity:0; 
    -webkit-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s; 
    -moz-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s; 
    -ms-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s; 
    -o-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s; 
    transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s; 
} 

ul.Nav ul li { 
    float:none; 
    border-top:1px Solid #FFF; 
} 

ul.Nav ul a { 
    white-space:nowrap; 
} 
ul.Nav li:hover ul{ 
    left:inherit; 
    opacity:1; 
} 
ul.Nav li:hover a{ 
    text-decoration:none; 
} 
ul.Nav li:hover ul a{ 
    text-decoration:none; 
} 
ul.Nav li:hover ul li a:hover{ 

} 

Каков наилучший способ достичь этого. Я хочу, чтобы лапы отображались, когда вы наводите курсор на кнопки навигации, если это возможно!

Answer 1

Вы нарушаете код в старых версиях IE, потому что вы помещаете таблицу в элемент привязки.

Вам не нужен стол, чтобы положить лапу туда. Просто поместите его в CSS как фоновое изображение на якорь и выровняйте его вправо.

Что-то вроде:

a { 
    opacity:0; 
    -webkit-transition:all 0.2s ease-in-out; 
    -moz-transition:all 0.2s ease-in-out; 
    -ms-transition:all 0.2s ease-in-out; 
    -o-transition:all 0.2s ease-in-out; 
    transition:all 0.2s ease-in-out; 
} 
a:hover { 
    background: url("/i/paw.png") no-repeat; 
    background-position: 100% 5px; 
} 

Если вы хотите использовать IMG элемент (так что вы можете анимировать непрозрачность), вы можете сделать это лучше так:

<a href='#'><img src='/i/paw.png' />Home</a> 

.Nav a img { 
    float: right; 
    margin-right: 5px; 
    width: 20px; 
    opacity: 0; 
    /** transition and other stuff */ 
} 

Это все, что вам нужно , Вы можете попробовать и посмотреть, не сломается или нет в IE.