html - CSS selector hover not working for list inside a list -
i'm using code homepage creative page wolverine's multipurpose html 5 template. when hover on link in nav bar, sub-menu doesn't show up. there way make submenu show up? noticed changing display:none
in .nav-main-menu > li > ul
not show submenu.
inline css
<style> .nav-main-menu > li > ul { display: none; } .nav-main-menu > li:hover > ul { display:block; } </style>
external css stylesheet
.nav-main-menu:not(.left-menu) > .sub-menu > ul { display: none; position: absolute; } .nav-main-menu:not(.left-menu) > .sub-menu .sub-menu > ul { display: none; } .nav-main-menu:not(.left-menu) > .sub-menu .sub-menu:hover > ul { display: block; -webkit-animation: fadein 0.7s; animation: fadein 0.7s; } .nav-main-menu:not(.left-menu) > .sub-menu:hover > ul { display: block; -webkit-animation: fadein 0.7s; animation: fadein 0.7s; }
html
<ul class="nav-main-menu nav-content-item"> <li><a href="#">home</a></li> <li><a href="#">about</a> <ul> <li><a href="">project overview</a></li> <li><a href="">project background</a></li> <li><a href="">future applications</a></li> </ul> </li> </ul>
the problem isn't css - it's size of webpage. :-) body not extend past div class="main-nav-wrapper nav-wrapper-1-creative">
, submenu, positioned below it, not visible when set display: block
. once have added rest of webpage, submenus should show fine. if want see them before then, add min-height
body make taller.
Comments
Post a Comment