【发布时间】：2014-05-07 18:21:03
【问题描述】：
我有一个 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 时，它确实可以工作。我仍然没有解决方案：/
【问题讨论】：
-
您需要在这里使用子选择器来正确定位您的第一级菜单项！
-
@Dev'Hamz 我不确定您所说的子选择器是什么意思
-
使用“#navigation > li”代替“#navigation li”
-
@Dev'Hamz 刚刚尝试过，但它完全搞砸了，导航不再是内联的。我以前从未见过使用过的“>”。我在我现在提到的答案中看到了它，我之前错过了它。它有什么作用，为什么只在这一行上？
标签： html css internet-explorer drop-down-menu