How to make the list item in which there is a change in the background color after the submenu has disappeared? https://jsfiddle.net/b5uma4re/13/ Now if you hover and remove the pointer to the child of the submenu, the background color of the parent element also disappears. It is necessary that he disappear after hiding the child submenu.

$(document).ready(function(){ $('.w1').hover( function(){ $(this).find('.q1').stop(true, true).delay(500).slideDown(); }, function(){ $(this).find('.q1').stop(true, true).delay(500).slideUp(); }); }); 
 * { box-sizing: border-box; margin: 0; padding: 0; } .cont{ font-size: 0; border: 1px black solid; } a{ text-decoration: none; line-height: 40px; padding: 0 20px; } .q1{ position: absolute; border: 1px black solid; width: 165px; display: none; } .q1 li{ border-top: 1px gray solid; display: block; } .w1{ font-size: 16px; border-left: 1px black solid; display: inline-block; position: relative; } .w2{ position: relative; } .w3{ position: relative; } .q2, .q3{ top: 0; left: 100%; position: absolute; border: 1px black solid; width: 210px; display: none; } li:hover{ background: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="cont"> <li class="w1"><a href="#">Домой</a></li><!-----------------------> <li class="w1"><a href="#">О нас +</a><!-----------------------> <ul class="q1 fir"><li><a href="#">Наша история</a></li> <li><a href="#">Как нас найти</a></li> <li><a href="#">Час работы</a></li> </ul></li><!-----------------------> <li class="w1"><a href="#">Наши товары +</a> <ul class="q1"> <li class="w2"><a href="#">+ Штуковины</a> <ul class="q2"> <li><a href="#">Простая штуковина</a></li> <li><a href="#">Стандартная штуковина</a></li> <li><a href="#">Продвинутая штуковина</a></li> </ul></li> <li class="w2"><a href="#">+ Гаджеты</a> <ul class="q2"> <li><a href="#">Простой гаджет</a></li> <li><a href="#">Стандартный гаджет</a></li> <li class="w3"><a href="#">+ Продвинутый гаджет</a> <ul class="q3"> <li><a href="#">Продвинутый гаджет A</a></li> <li><a href="#">Продвинутый гаджет Б</a></li> </ul></li> </ul></li> <li><a href="#">Машини времени</a></li> </ul></li> </ul>

    2 answers 2

    Unfortunately, I did not quite understand what you want.

    How do you like my example menus?

     ul { padding: 0; } .menu { display: flex; flex-wrap: wrap; list-style: none; position: relative; } .menu > li { display: block; padding: 20px 10px; border: 1px solid black; text-align:center; cursor: pointer; } .menu > li:hover { background-color: #022; color: white; } .submenu { display: block; position: absolute; list-style: none; top: 100%; padding: 20px 0px; border: 1px solid black; background-color: #022; color: white; transform: translateX(-10px); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .menu > li:hover .submenu { opacity: 1; pointer-events:auto; } .submenu > li { padding: 10px; } .submenu > li:hover { background: white; color: black; } 
     <ul class="menu"> <li>Меню 1 <ul class="submenu"> <li>Подменю 1</li> <li>Подменю 2</li> <li>Подменю 3</li> </ul> </li> <li>Меню 2 <ul class="submenu"> <li>Подменю 1</li> <li>Подменю 2</li> <li>Подменю 3</li> </ul> </li> <li>Меню 3 <ul class="submenu"> <li>Подменю 1</li> <li>Подменю 2</li> <li>Подменю 3</li> </ul> </li> </ul>

    Added solution via jquery.

     $('.menu > li').on('mouseenter', function() { const $this = $(this); if ($this.children('.submenu').length === 0) { $this.addClass('li-hover'); } else { $this.addClass('li-hover'); $this.children('.submenu').slideDown(300); } }).on('mouseleave',function() { const $this = $(this); if ($this.children('.submenu').length === 0) { $this.removeClass('li-hover'); } else { $this.children('.submenu').slideUp(300, function() { $this.removeClass('li-hover'); }); } }); 
     ul { padding: 0; } .menu { display: flex; flex-wrap: wrap; list-style: none; position: relative; } .menu > li { display: block; padding: 20px 10px; border: 1px solid black; text-align:center; cursor: pointer; } .li-hover { background-color: #022; color: white; } .submenu { display: none; position: absolute; list-style: none; top: 100%; padding: 20px 0px; border: 1px solid black; background-color: #022; color: white; transform: translateX(-10px); transition: opacity 0.3s; } .submenu > li { padding: 10px; } .submenu > li:hover { background: white; color: black; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li>Меню 1 </li> <li>Меню 2 <ul class="submenu"> <li>Подменю 1</li> <li>Подменю 2</li> <li>Подменю 3</li> </ul> </li> <li>Меню 3 <ul class="submenu"> <li>Подменю 1</li> <li>Подменю 2</li> <li>Подменю 3</li> </ul> </li> </ul>

    • Hover over the link "About Us" and wait until the submenu appears. the problem is that if you remove the pointer, then the link "About Us" ceases to be red. It is necessary that it ceases to be red only after hiding the submenu. - PeGaS
    • Then use css solutions for creating menus and adjust the animation speed through transition (the css option is the fastest and easiest in my opinion) or if you need a solution via jq, then in slideDown () and slideUp () you can set the callback to complete the animation, and remove the class from the "About Us" button in it - DimenSi
    • Added solution for you through jquery. - DimenSi
    • Your solution is good, but when you add the delay () method, the problem remains: jsfiddle.net/g60z9jxz/1 the background color of "Menu2" and "Menu3" responds to the mouse pointer not as "Menu1" ie. if you hover and put away on "Menu2" then the color disappears with a delay - PeGaS
    • Use setTimeout instead of delay (), the color disappears by the delay, because the color is removed only when slideUp () completes. In my solution, the color of the elements with descendants is added immediately and disappears only when the submenu disappears. - DimenSi

    I decided everything: http://jsfiddle.net/xBB5x/13021/ was simple.

      $('.w1').hover( function(){ $(this).find('.q1').stop(true, true).delay(500).slideDown(); $(this).stop(true, true).css('background','red'); }, function(){ if($(this).find('.q1').is(':visible')){ $(this).find('.q1').stop(true, true).delay(500).slideUp(function(){ $(this).parent().stop(true, true).delay(0).animate( { backgroundColor:'transparent' },0); }); } else{ $(this).find('.q1').stop(true, true).delay(300).slideUp(); $(this).css('background','transparent'); } }); 
     * { box-sizing: border-box; margin: 0; padding: 0; } .cont{ font-size: 0; border: 1px black solid; } a{ text-decoration: none; line-height: 40px; padding: 0 20px; } .q1{ position: absolute; border: 1px black solid; width: 165px; display: none; } .q1 li{ border-top: 1px gray solid; display: block; } .w1{ font-size: 16px; border-left: 1px black solid; display: inline-block; position: relative; } .w2{ position: relative; } .w3{ position: relative; } .q2, .q3{ top: 0; left: 100%; position: absolute; border: 1px black solid; width: 210px; display: none; } li:hover{ background: red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script> <ul class="cont"> <li class="w1"><a href="#">Домой</a></li><!-----------------------> <li class="w1"><a href="#">О нас +</a><!-----------------------> <ul class="q1 fir"><li><a href="#">Наша история</a></li> <li><a href="#">Как нас найти</a></li> <li><a href="#">Час работы</a></li> </ul></li><!-----------------------> <li class="w1"><a href="#">Наши товары +</a> <ul class="q1"> <li class="w2"><a href="#">+ Штуковины</a> <ul class="q2"> <li><a href="#">Простая штуковина</a></li> <li><a href="#">Стандартная штуковина</a></li> <li><a href="#">Продвинутая штуковина</a></li> </ul></li> <li class="w2"><a href="#">+ Гаджеты</a> <ul class="q2"> <li><a href="#">Простой гаджет</a></li> <li><a href="#">Стандартный гаджет</a></li> <li class="w3"><a href="#">+ Продвинутый гаджет</a> <ul class="q3"> <li><a href="#">Продвинутый гаджет A</a></li> <li><a href="#">Продвинутый гаджет Б</a></li> </ul></li> </ul></li> <li><a href="#">Машини времени</a></li> </ul></li> </ul>