PHP 生成带有 :hover icons 的 CSS 下拉列表

Question

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

我所做的是一个普通的 CSS Dropdown Navbar，但在 block 元素中放置了一个表格。因此允许我使用 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 中是代码中断，因为你将表格放在 anchor 元素中。

你不需要一张 table 来把爪子放在那里。只需将它放在 CSS 中作为 anchor 上的背景图片并将其右对齐。

类似于:

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 中尝试一下，看看它是否会中断。