Question

我正在制作一个下拉菜单meenu，它正在IE 8中消失。在Firefox和Chrome中运行良好，但在IE8中没有。我用Google搜索了两天并进行了很多更改，但仍然没有在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兼容性视图可能有助于正确显示。试试吧。

Answer 2

我正在使用jQuery Dropdown，在任何浏览器都没有错误。

如果您的菜单运行良好资源管理器兼容性视图为“Sagotharan”建议您可以通过设置IE渲染为IE7来覆盖IE渲染引擎，就像这样

<meta http-equiv="X-UA-Compatible" content="IE=7" />

下拉菜单在IE8中消失

2 个答案: