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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -