PHP 生成带有 a:hover 图标的 CSS Dropdown

Question

好的，所以我为一个网站编写了这个下拉脚本，但是我想不出一种方法可以让图标按照他们使用现代标准的方式工作，而且我知道我已经做到了目前它的做法很糟糕。

我所做的是一个普通的 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 中是否中断。