我的菜单栏在 IE 10 中不起作用。二级菜单没有打开。它在 Google Chrome、Firefox、Safari、Opera 中运行良好,但在 IE10 中运行良好。当我进入菜单项时,如何确保二级菜单打开?
CSS:
#top-menu {
position:absolute;
left:0;
}
#top-menu li {
float:left;
height:100%;
position:relative;
}
#top-menu li a {
color:#003366;
width:100%;
height:100%;
position:relative;
font:20px/28px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
}
#top-menu li img {
display:block;
padding:4px;
}
#top-menu li:hover ul {
z-index:999;
top:100%;
left:0;
}
#top-menu ul {
z-index:-1111;
top:0;
width:auto;
background-color:#FFFFFF;
position:absolute;
border:4px solid #003366;
border-top:0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#top-menu ul li {
white-space:nowrap;
width:100%;
float:left;
}
#top-menu ul li a {
font-size:16px;
padding:5px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
#top-menu ul li:hover {
background-color:#003366;
}
#top-menu ul li:hover a {
color:#FFFFFF;
}
HTML + PHP:
<ul id="top-menu">
<li><a href="index.php" title="Homepage"><img src="img/menu/home.png" alt="Homepage" /></a></li>
<li><a href="#" title="List & Print residents"><img src="img/menu/list-print.png" alt="List & Print residents" /></a>
<ul>
<li><a href="list-residents.php?sortby=name" title="List residents by Name">List by Name</a></li>
<li><a href="list-residents.php?sortby=lot" title="List residents by Lot Number">List by Lot Number</a></li>
<li><a href="list-residents.php?sortby=date-added" title="List residents by Date Added">Date Added</a></li>
</ul>
</li>