CSS dropdown menu fading in improperly -

having bit of strange problem setting fade in drop down menu - here's css it:

.main-navigation li ul li {   opacity:0;   transition:opacity 0.3s linear;   -webkit-transition:opacity 0.3s linear;   -moz-transition:opacity 0.3s linear;   -o-transition:opacity 0.3s linear;  }  .main-navigation li:hover > ul li {       opacity:1;  } 

and html (as generated through wp):

<nav id="site-navigation" class="main-navigation" role="navigation">             <h3 class="menu-toggle">menu</h3>             <a class="assistive-text" href="#content" title="skip content">skip content</a>             <div class="menu-nav-container"><ul id="menu-nav" class="nav-menu"><li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-23"></li> <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"></li> <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-24"> <ul class="sub-menu">     <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"></li>     <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"></li>     <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"></li> </ul> </li> <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"> <ul class="sub-menu">     <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"></li>     <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"></li>     <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"></li> </ul> </li> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28"> <ul class="sub-menu">     <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"></li>     <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"></li>     <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"></li> </ul> </li> </ul></div> 

the sublists fade in when scroll on list item, problem this: fade in when scroll on area be. can't seem solve - have ideas?

thanks!

elements have opacity set 0 still occupy space on page (unless position them or float them), , when hover on sub nav, hovering on parent <li> causing animation run.

there's trick using visibility: hidden , position: absolute fix this. added bonus, because visibility property allows use of transitions (display doesn't) can make smooth fade out effect fade in setting delay.

i'd set styles on sub nav <ul> rather sub nav <li>s.

.main-navigation li ul {    position: absolute; /* take out of document flow */   visibility:hidden;   opacity:0;   transition:visibility 0s linear 0.3s, opacity 0.3s linear; }  .main-navigation li:hover > ul {    visibility:visible;   opacity:1;   transition-delay:0s; } 

the visibility transition delay matches length of opacity transition length means when stop hovering, visibility won't happen until opacity finished animating.

demo