html - Need help making a sub menu that opens on hover -
i have menu have built working fine, trying add sub menu items appear when mouse hovers on menu item. know how this?
<div id="menu"> <a href="#" >home</a> <a href="#">submit new record</a> <a href="#">sales salesperson</a> <a href="#">total sales</a> <a href="#" >sales issue</a> <a href="#" >sales ad size</a> <a href="#" >add new user</a> <a href="#">edit record</a> <a href="#">logout</a> </div></center> <style> #menu{ background-color:#3f9ad1; height:75px; width:1206px; } #menu a{ border-style:solid; border-width:2px; border-color:white; padding-top: 20px; float:left; display:block; width:130px; height:70px; text-decoration:none; color:white; text-align:center; font-family: arial; /*box-shadow: 0 -7px 22px 6px #000000 inset;*/ } #menu a:hover{ color:#3f9ad1; background-color:white; #html { height: 100%; margin-bottom: 0.01em; overflow-y: scroll; } </style>
i this:
<ul class="menu"> <li>main menu item <ul class="submenu"> <li>sub menu item</li> </ul> </li> </ul>
then css this:
ul.submenu { display: none; } li:hover ul.submenu { display: block; }
Comments
Post a Comment