html - Hiding the secondary child menu behind its parent -
i want secondary menu scroll down when go on hover parent. don't want secondary menu go on first menu items while openning up. how can fix that?
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 name">list name</a></li> <li><a href="list-tenants-by-lot.php" title="list tenants lot number">list 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 { 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: 500ms ease-in-out; -moz-transition: 500ms ease-in-out; -ms-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; } #top-menu ul li { white-space:nowrap; width:100%; float:left; } #top-menu ul li { font-size:16px; }
Comments
Post a Comment