当我将鼠标悬停在其父级时,我希望辅助菜单向下滚动。打开时,我不希望二级菜单覆盖第一个菜单项。我该如何解决这个问题?
HTML:
<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 Tenants"><img src="img/menu/list-print.png" alt="List & Print Tenants" /></a> <ul>
<li><a href="list-tenants-by-name.php" title="List Tenants by Name">List by Name</a></li>
<li><a href="list-tenants-by-lot.php" title="List Tenants by Lot Number">List by Lot Number</a></li>
</ul>
</li>
<li><a href="#" title="Modify Tenants"><img src="img/menu/modify.png" alt="Modify Tenants" /></a></li>
</ul>
CSS:
#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:200px;
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;
}