html - 下拉菜单在 IE8 中消失

Question

我正在开发一个下拉菜单，它在 IE 8 中消失了。在 Firefox 和 Chrome 中工作正常，但在 IE8 中不行。我用谷歌搜索了两天并做了很多更改，但仍然无法在 IE 中工作。这是 CSS 的代码。

.dropdownmenu li, .dropdownmenu li ul
{  
display: block;display:inline;float:none; 
}

dropdownmenu ul:hover , .dropdownmenu ul  li:hover 
{
display: block;display:inline; float:none;
}


.dropdownmenu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 37.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#ffffff;
    }
.dropdownmenu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .dropdownmenu li a.top_link span {color:#ffffff;font-size:11px;}

    .dropdownmenu li{
    color: #FFFFFF;
    font-size:11px;
        float:left;
        padding:0px;
        }
    .dropdownmenu li a{
        background:#333333 url("dropdown/seperator.gif") bottom right no-repeat;
        color:#ffffff;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 11px;
        text-align:center;
        text-decoration:none;
        }
        .dropdownmenu li a:hover{
            background: #2580a2 url("dropdown/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .dropdownmenu li ul{
    color:#ffffff;
    font-size:10px;
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:auto;
        z-index:200;
        /*top:1em;
        left:0;*/
        }
    .dropdownmenu li:hover ul{
        display:block;
        float:left;
        }
    .dropdownmenu li li {
        background:url('dropdown/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:auto;
        }

    .dropdownmenu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        color:#ffffff;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 17px;
        text-align:left;
        }

        .dropdownmenu li ulli a:hover{
        display:block;
            background:#2580a2;
            color:#ffffff;
            text-decoration:none;
            }

这是php代码，我用过<?include ('dropdown.php')?>在我的网站上将其包含在 CMS 构建的网站中。

<link rel="stylesheet" href="dropdown/dropdown3.css" type="text/css" />
<ul class="dropdownmenu">
    <li ><a href="?category_id=140" class="top_link"><span>Home & Garden  <img src="dropdown/down.gif"></span></a>
    <ul class="sub">
        <li><a href="?category_id=145">ArtWork</a></li>         
        <li><a href="?category_id=146">Bedding & Bath</a></li>
        <li><a href="?category_id=150">Kitchen & Dining</a></li>
        <li><a href="?category_id=151">Patio, Lawn & Garden</a></li>
        <li><a href="?category_id=152">Pet Supplies</a></li>
        <li><a href="?category_id=153">Sewing, Craft & Hobbies</a></li>
        <li><a href="?category_id=154">Vacuum, Cleaning & Storage </a></li>
    </ul>
    </li>
</ul>

我还能做些什么来修复它在 IE 中的问题？

此外，当鼠标悬停在下拉菜单上时，它会显示#2580a2 的背景颜色，可以在.dropdownmenu li a:hover 中看到。这个特别的东西没有在 chrome 中显示。可能是什么原因？

Answer 1

在该网站上使用 Internet Explorer 兼容性 View 可能有助于其正确显示。试试吧。