我有这个下拉菜单代码，除了在资源管理器中，它在所有浏览器中都很有用。在资源管理器中，下拉菜单根本不起作用。我竭尽全力解决这个问题，但我无法做到。主水平菜单是可见的，链接似乎可以工作但是应该在悬停时出现的下拉菜单根本不显示。
请帮帮忙！.....
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
position: relative;
top: 0;
width: 80%;
height: auto;
border: 1px solid #e6e6e6;
margin: 0 auto;
font-family: 'Helvetica', Arial, sans-serif;
}
/* Root Level */
.dropdown-menu {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: #eeeeee;
}
/* Clear the float */
.dropdown-menu:after {
display: table;
content: "";
clear: both;
}
.dropdown-menu li {
display: block;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
min-width: 150px;
float: left;
}
.dropdown-menu li a:link,
.dropdown-menu li a:visited {
padding: 10px 15px;
text-decoration: none;
color: #111111;
display: block;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
color: #222222;
}
/* Level 1 */
.dropdown-level-1 {
position: absolute;
padding: 0;
margin: 0;
display: none;
background: grey;
width: 150px;
}
.dropdown-level-1 li {
}
/* The ">" triggers the direct child to show up as "block" */
.dropdown-menu li:hover > .dropdown-level-1 {
display: block;
}
/* Level 2 */
.dropdown-level-2 {
position: absolute;
display: none;
background: #888888;
padding: 0;
margin: -38px 0 0 148px;
}
/* same trick here for level 2 */
.dropdown-level-1 li:hover > .dropdown-level-2 {
display: block;
}
/* Target all links at once */
.dropdown-level-0 li a:link,
.dropdown-level-0 li a:visited,
.dropdown-level-1 li a:link,
.dropdown-level-1 li a:visited,
.dropdown-level-2 li a:link,
.dropdown-level-2 li a:visited {
padding: 10px;
color: purple;
display: block;
}
.dropdown-level-0 li a:hover,
.dropdown-level-0 li a:focus,
.dropdown-level-1 li a:hover,
.dropdown-level-1 li a:focus,
.dropdown-level-2 li a:hover,
.dropdown-level-2 li a:focus {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#"> Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>