将辅助子菜单隐藏在其父级后面

Question

当我将鼠标悬停在其父级时，我希望辅助菜单向下滚动。打开时，我不希望二级菜单覆盖第一个菜单项。我该如何解决这个问题？

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; 
}