css - Hover is triggered when mouse over child element -
i trying use transition effects on drop down menu , using display: none stops transition happening instead using opacity.
a strange thing happening. when mouse hovers on see-through sub menu becomes visible have selected behaviour happen when mousing on parent <li> , not mousing on it. child '` absolutely positioned below it.
in snippet below, move mouse underneath post , sub menu appear. want appear when mouse ontop of post box in black border.
there going on here don't understand.
menu-main-menu-container { position: relative; } ul.menu { background: lightblue; padding: 0; } ul.menu > li { border: 1px solid black; position: relative; display: inline-block; height: 30px; padding-right: 20px; padding-left: 20px; } ul.menu > li > ul.sub-menu { top: 100%; } ul.menu li.menu-item-has-children:hover > ul.sub-menu { opacity: 1; } ul.sub-menu { padding: 0; left: 0; list-style: none; transition: 1s ease; position: absolute; opacity: 0; background-color: lightyellow; } ul.sub-menu ul.sub-menu { left: 100%; top: 0; background-color: grey; } ul.sub-menu li { position: relative; padding: 20px; }<div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2385" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2385 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/">home</a></li> <li id="menu-item-2386" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2386 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/get-quote-inner/">testimonials</a></li> <li id="menu-item-2387" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2387 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/services-inner/">login</a></li> <li id="menu-item-2388" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2388 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/blog-post-8/">post</a> <ul class="sub-menu"> <li id="menu-item-2646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2646 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/gallery/">gallery</a></li> <li id="menu-item-2647" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2647 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/services/">services</a> <ul class="sub-menu"> <li id="menu-item-2390" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2390 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/product/this-is-a-product/">product</a></li> <li id="menu-item-2649" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2649 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/login/">login</a></li> </ul> </li> <li id="menu-item-2648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2648 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/contactus/">contactus</a></li> </ul> </li> <li id="menu-item-2389" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2389 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/service-fence-inner/">page</a></li> <li id="menu-item-2391" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2391 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/expert/gagan-goraya/">expert</a></li> </ul> </div>when inspect <li> not resizing on child absolutely positioned <ul> why triggering li:hover effect?
changing opacity change actual visibility you, user.
the browser , dom both render element anyway. space of element used, it's not visible you.
an easy fix setting max-height 0 , changing you're never going reach on hover. way, space take limited 0. regulating overflows help.
menu-main-menu-container { position: relative; } ul.menu { background: lightblue; padding: 0; } ul.menu > li { border: 1px solid black; position: relative; display: inline-block; height: 30px; padding-right: 20px; padding-left: 20px; } ul.menu > li > ul.sub-menu { top: 100%; } ul.menu li.menu-item-has-children:hover > ul.sub-menu { opacity: 1; max-height: 1000px; overflow: visible; } ul.sub-menu { padding: 0; left: 0; list-style: none; transition: 1s ease; position: absolute; opacity: 0; max-height: 0px; overflow: hidden; background-color: lightyellow; } ul.sub-menu ul.sub-menu { left: 100%; top: 0; background-color: grey; max-height: 1000px; } ul.sub-menu li { position: relative; padding: 20px; }<div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2385" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2385 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/">home</a></li> <li id="menu-item-2386" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2386 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/get-quote-inner/">testimonials</a></li> <li id="menu-item-2387" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2387 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/services-inner/">login</a></li> <li id="menu-item-2388" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2388 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/blog-post-8/">post</a> <ul class="sub-menu"> <li id="menu-item-2646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2646 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/gallery/">gallery</a></li> <li id="menu-item-2647" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2647 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/services/">services</a> <ul class="sub-menu"> <li id="menu-item-2390" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2390 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/product/this-is-a-product/">product</a></li> <li id="menu-item-2649" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2649 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/login/">login</a></li> </ul> </li> <li id="menu-item-2648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2648 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/contactus/">contactus</a></li> </ul> </li> <li id="menu-item-2389" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2389 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/service-fence-inner/">page</a></li> <li id="menu-item-2391" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2391 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/expert/gagan-goraya/">expert</a></li> </ul> </div>
Comments
Post a Comment