Tell me how to solve the problem:
If you hover over the area next to the right of the Sample menu (just next to it, and not at Sample ), the menu still leaves.

Here is my first question on this topic.

This happens because the menus are simply invisible, but can still be active. How to get rid of the bug?

 html, * { margin: 0; padding: 0; font-size: 16px; } body { background: #eee; } a { text-decoration: none; } .menu { z-index: 100; width: 230px; position: relative; display: block; background: #fff; } .menu ul { margin: 0; padding: 0; list-style: none; } .menu ul li { display: block; border-bottom: #ccc 1px solid; /*position: relative;*/ } .menu ul li a { display: block; color: #000; padding: 5px; } .menu ul li.active>a, .menu ul li a:hover { text-decoration: none; color: #fff; background: #ccc; } .menu ul li .submenu { opacity: 0; z-index: -1; position: absolute; width: 0; min-height: 100%; top: 0; left: 100%; background: #ddd; /* вот здесь я указываю задержку */ transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; } .menu ul li:hover >.submenu { opacity: 1; z-index: 1; width: 100% } 
 <div class="menu"> <ul> <li><a href="#">Sample</a></li> <li class="active"><a href="">Sample</a> <ul class="submenu submenu1"> <li><a href="#">Subsubsubsubsub</a></li> <li><a href="#">Subsubsubsubsub</a></li> <li class="active"><a href="">Subsubsubsubsub</a> <ul class="submenu submenu2"> <li><a href="#">Subsubsubsubsub</a></li> <li><a href="#">Subsubsubsubsub</a></li> <li><a href="#">Subsubsubsubsub</a></li> <li class="active"><a href="">Subsubsubsubsub</a> <ul class="submenu submenu3"> <li><a href="#">Subsubsubsubsub</a></li> <li><a href="#">Subsubsubsubsub</a></li> <li><a href="#">Subsubsubsubsub</a></li> <li><a href="#">Subsubsubsubsub</a></li> <li class="active"><a href="">Subsubsubsubsub</a></li> </ul> <!--// Inner Child 3 --> </li> <li><a href="#">Sub</a></li> </ul> <!--// Inner Child 2 --> </li> <li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li> </ul> <!--// Inner Child 1 --> </li> <li><a href="#">Sample</a></li> <li><a href="#">Sample</a></li> <li class="active"><a href="#">Sample</a> <ul class="submenu submenu3"> <li><a href="#">Subsubsubsubsub</a></li> <li><a href="#">Subsubsubsubsub</a></li> </ul> </li> </ul> </div>

  • one
    put the left not 100%, but immediately 230px - DNS
  • one
    padding changes the real width of the block - put 240rp - DNS
  • one
    In general, open the developer’s tool in the browser - it nicely highlights indents and indents. See what's going to - DNS
  • Not quite sure where to add padding. The joke is that in DOM, I have nothing but the menu and there is no - evans
  • one
    the link already has padding ... Your problem - the menu is going before the block boundary. It is necessary to set the left position of the sub-menu to the NECESSARY shift. 100%, apparently, does not go where it is necessary - DNS

0