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

Popular posts from this blog

How to show in django cms breadcrumbs full path? -

-
need advice - how show in breadcrumbs whole path article or page? i've got code: {% ance in ancestors %} <li> {% if not forloop.last %} <a href="{{ ance.get_absolute_url }}">{{ ance.get_menu_title }}</a> {% else %} <span class="active">{{ ance.get_menu_title }}</span> {% endif %} </li> {% endfor %} but shows "home" , current page. how modify show whole path in breadcrumbs? i've found in file menu_tags.py code calls ancestors. @ least there class showbreadcrumbs: class showbreadcrumb(inclusiontag): """ shows breadcrumb node has same url current request - start level: after level should breadcrumb start? 0=home - template: template used render breadcrumb """ name = 'show_breadcrumb' template = 'menu/dummy.html' options = options( argument('start_level', default=0, require...
Read more

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

-
Image
i've installed yii2-user module/dektrium yii2-app-basic application command composer require "dektrium/yii2-user:0.9.*@dev" config/console.php return [ . . 'modules' => [ 'gii' => 'yii\gii\module', 'user' => [ 'class' => 'dektrium\user\module', ], ], . . ] config/web.php 'components' => [ . . /* 'user' => [ 'identityclass' => 'app\models\user', 'enableautologin' => true, ], */ 'modules' => [ 'user' => [ 'class' => 'dektrium\user\module', ], ], . . ] after that, run command $ php yii migrate/up --migrationpath=@vendor/dektrium/yii2-user/migrations updating database schema . but, when run http://localhost/mylawsuit/yii/web/index.php?r=u...
Read more

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -

-
i have app uses rails framework , implements angularjs part of front end. i have pushed heroku , have heroku toolbelt installed, when try migrate db using "heroku run rake db:migrate" receive following error(s): installing core plugins heroku-cli-addons, heroku-apps, heroku-fork, heroku-git, heroku-local, heroku-run, heroku-status... error installing package. try running again gode_debug=info see more output. ! `run` not heroku command. ! perhaps meant `-h`, `2fa`, `auth`, `join`, `open`, `orgs`, `pg`, `ps` or `rake`. ! see `heroku help` list of available commands. i run command "gode_debug=info heroku run rake db:migrate" , receive error: npm err! darwin 14.5.0 npm err! argv "/users/christopher_pelnar/.heroku/node-v4.2.1-darwin-x64/bin/node" "/users/christopher_pelnar/.heroku/node-v4.2.1-darwin-x64/lib/node_modules/npm/cli.js" "install" "heroku-cli-addons" "heroku-apps" "heroku-fork...
Read more