html - Navigation Submenu is not coming up -
i have created navigation menu sub menu. can please me find out why sub menu coming part of main menu?
navigation have options like: home, about, portfolio... portfolio have menu options: web development, motion...
issue: web development should have sub menu: bootstrap, css rather coming part of main menu.<div id="navigation"><ul class="navigation"><li><a href="#">home</a></li></ul>/div>
body { background: #c4c7cb; background-image: -webkit-radial-gradient(cover, #fff, #d1d1d1); background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae); background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae); background-image: radial-gradient(cover, #e8eaec, #a4a8ae) } html { min-height: 100%; } .navigation { height: 50px; padding: 0; margin: 0; position: absolute; } .navigation li { height: auto; width: 150px; float: left; text-align: center; list-style: none; font: 12px"bonveno", "century gothic"; padding: 0; margin: 0; background-color: #eee; border: 1px solid #ccc; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1); border-radius: 3px; margin-left: 10px; } .navigation { padding: 13px; text-decoration: none; color: #333; text-shadow: 0 1px #fff; display: block; } .navigation li ul { display: none; height: auto; margin-left: -11px; padding: 0; } .navigation li:hover ul { display: block; } .navigation li:hover, a:hover { background: #e8e8e8; }
<div id="navigation"> <ul class="navigation"> <li><a href="#">home</a> </li> <li><a href="#">about</a> </li> <li><a href="#">my portfolio</a> <ul> <li><a href="#">web development</a> <ul> <li><a href="#">bootstrap</a> </li> <li><a href="#">css</a> </li> </ul> </li> <li><a href="#">motion graphics</a> </li> <li><a href="#">flash animation</a> </li> <li><a href="#">logo design</a> </li> <li><a href="#">photography</a> </li> </ul> </li> <li><a href="#">services</a> </li> <li><a href="#">contact</a> </li> </ul> </div>
it because have css rule .navigation li:hover ul { display: block; }
believe want show second level menu on first level item hover. rule applying third level menu (that means ul
under first level item hovers applied display: block;
), may want use
.navigation li:hover > ul
instead
Comments
Post a Comment