html - CSS 下拉菜单在 IE8 中消失

我有一个 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 它确实有效。我仍然没有解决方案:/

最佳答案

我使用了您的代码并删除了 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>

关于html - CSS 下拉菜单在 IE8 中消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23514217/

html - CSS 下拉菜单在 IE8 中消失

上一篇：html - 仅下拉导航菜单 block

下一篇：javascript - 在运行时或启动时设置 scss 变量的值