Question

我有一个CSS下拉菜单，在firefox，chrome和大多数版本的IE中都很好看。

但在IE8中，下拉菜单会在您从顶部菜单栏向下移动鼠标时消失。

我已经找了一段时间的答案现在我在堆栈上找到了这个答案

https://stackoverflow.com/a/10132588/2393553

并相应地修改了我的代码。但我仍然无法让它发挥作用：/

这是我的CSS

#navigation {
    margin-top:-15px;
    font-size: 14pt;
    z-index:9000;
}

#navigation ul {
    float: right;
    list-style-type: none;
    z-index:9000;
    padding:0px;
    margin:0px;
}

#navigation li {
    float: left;
    color: #505050;
    position:relative;
    z-index:9000;
    right:0px;
    display:block;
}


#navigation li ul
{
    display: none;
    z-index: 9000;
    position:absolute;
    top:100%;
    left:0;
}

#navigation li ul.end
{
    display: none;
    z-index: 9000;
    position:relative;
    top:auto;
    right:0;
}

#navigation a
{
    display: block;
    text-decoration: none;
    color: #00529f;
    padding: 5px 7px 5px 7px;
    margin-left: 1px;
    white-space: nowrap;
    z-index: 9000;
}

#navigation li a:hover 
{
    background: #00529f;
    color:#fff;
    text-decoration: none;
    z-index: 9000;
    margin:0px;
    display:block;
}

#navigation li:hover ul 
{
    display: block;
    z-index:9000;
    left:auto;
    margin-left:0px;
}

#navigation li:hover li
{
    float: none;
    font-size: 18px;
    text-align: left;
    font-family: verdana;
    z-index:9000;
    border-top:1px solid #fff;
    margin-left:0px;
}

#navigation li:hover a 
{
    background: #00529f;
    color:#fff;
    z-index:9000;
    margin-left:0px;
}

#navigation li:hover li a:hover
{
    background: #7ca7d8;
    z-index:9000;
    margin-left:0px;
}

，这是我的HTML

<div id = "navigation">
    <ul>
        <li><a href = "<?=$myroot?>index"><?=get_content(1)?></a></li>
        <li><a href = "<?=$myroot?>about"><?=get_content(2)?></a>
            <ul>
                <li><a href = "<?=$myroot?>help"><?=get_content(7)?></a></li>
                <li><a href = "<?=$myroot?>news"><?=get_content(199)?></a></li>
                <li><a href = "<?=$myroot?>about/awards/5"><?=get_content(201)?></a></li>
                <li><a href = "<?=$myroot?>about/awards/5"><?=get_content(202)?></a></li>
            </ul>
        </li>
        <li><a href = "<?=$myroot?>products"><?=get_content(1322)?></a>
            <ul>
                <li><a href = "<?=$myroot?>products/manufacturers"><?=get_content(3208)?></a></li>
            </ul>
        </li>
        <li><a href = "<?=$myroot?>services"><?=get_content(3950)?></a></li>
        <li><a href = "<?=$myroot?>media"><?=get_content(1825)?></a>
            <ul>
                <li><a href = "<?=$myroot?>blog"><?=get_content(3972)?></a></li>
                <li><a href = "<?=$myroot?>media/repair_brochure/united_kingdom_aldridge"><?=get_content(1816)?></a></li>
                <li><a href = "<?=$myroot?>media/videos/"><?=get_content(505)?></a></li>
            </ul>
        </li>
        <li><a href = "<?=$myroot?>contact"><?=get_content(4)?></a>
            <ul class="end">
                <li><a href = "<?=$myroot?>meet_the_team.php"><?=get_content(4050)?></a></li>
                <li><a href = "<?=$myroot?>find-a-branch.php"><?=get_content(4005)?></a></li>
            </ul>
        </li>
    </ul>
</div>

有人可以帮忙吗？

快速编辑通知您使用IEtester进行测试时，它无法在IE8中运行。它也不适用于安装了IE8的同事机器。但是，当使用IE10中的开发人员工具对其进行测试时，将版本设置回IE8，它确实有效。我仍然没有解决方案：/

Answer 1

我使用了您的代码并删除了href代码。它在IE8中对我来说很好用（我使用ie开发工具来测试它）。

这是我测试过的HTML。

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <style>
#navigation {
margin-top:-15px;
font-size: 14pt;
z-index:9000;
}

#navigation ul {
float: right;
list-style-type: none;
z-index:9000;
padding:0px;
margin:0px;
}

#navigation li {
float: left;
color: #505050;
position:relative;
z-index:9000;
right:0px;
display:block;
}


#navigation li ul
{
display: none;
z-index: 9000;
position:absolute;
top:100%;
left:0;
}

#navigation li ul.end
{
display: none;
z-index: 9000;
position:relative;
top:auto;
right:0;
}

#navigation a
{
display: block;
text-decoration: none;
color: #00529f;
padding: 5px 7px 5px 7px;
margin-left: 1px;
white-space: nowrap;
z-index: 9000;
}

#navigation li a:hover 
{
background: #00529f;
color:#fff;
text-decoration: none;
z-index: 9000;
margin:0px;
display:block;
}

#navigation li:hover ul 
{
display: block;
z-index:9000;
left:auto;
margin-left:0px;
}

#navigation li:hover li
{
float: none;
font-size: 18px;
text-align: left;
font-family: verdana;
z-index:9000;
border-top:1px solid #fff;
margin-left:0px;
}

#navigation li:hover a 
{
background: #00529f;
color:#fff;
z-index:9000;
margin-left:0px;
}

#navigation li:hover li a:hover
{
background: #7ca7d8;
z-index:9000;
margin-left:0px;
}

    </style>

</head>

    <body>

   <div id = "navigation">
<ul>
    <li><a href = "">sdfs</a></li>
    <li><a href = "">sdfs</a>
        <ul>
            <li><a href = "">sdfs</a></li>
            <li><a href = "">ddfsdfs</a></li>
            <li><a href = "">sdfsfsfsd</a></li>
            <li><a href = "">hdfgfd</a></li>
        </ul>
    </li>
    <li><a href = "">fhfgh</a>
        <ul>
            <li><a href = "">hkhfjf</a></li>
        </ul>
    </li>
    <li><a href = "">lghjn</a></li>
    <li><a href = "">tyjffgh</a>
        <ul>
            <li><a href = "">gfdhhgd</a></li>
            <li><a href = "">lhghjgjg</a></li>
            <li><a href = "">ccvcxv</a></li>
        </ul>
    </li>
    <li><a href = "">gfdfd</a>
        <ul class="end">
            <li><a href = "">fdfdfd</a></li>
            <li><a href = "">dgdfgdfgfd</a></li>
        </ul>
    </li>
</ul>
</div>

    </body>
</html>

CSS下拉菜单在IE8中消失

1 个答案: