Фикс бага в выпадающем меню HTML

170

04 октября 2018, 04:40

Всем привет, помогите, пожалуйста. Делаю меню с выпадающими списками и возникла такая ситуация: В меню "Зимние виды" есть подменю, когда наводишь на "Зимние виды" оно открывается, но когда хочешь открыть подменю "другие виды", убираешь курсор с "Зимние виды" и подменю пропадает, соответственно курсор уходит за пределы главного меню и оно тоже закрывается. Заранее спасибо.

#yw1 {display:none; 
flex-direction:column; 
position:absolute; 
z-index:10; 
background-color:#000; 
border: 2px solid #ffc500; 
}  
#yw1 li { 
padding:5px; 
margin:5px; 
z-index:10; 
}  
#yw0 li:hover #yw1{display:flex;}  
#yw1 li:hover #yw2{display:flex;}  
#yw2 { 
display:none; 
position:relative; 
justify-content:flex-end; 
z-index:2000; 
background-color:#000; 
border: 2px solid #ffc500; 
}  
#yw2 li { 
padding:5px; 
margin:5px; 
z-index:2000; 
} 
#yw0 li:hover #yw1{display:flex;} 
#yw0 {margin-bottom:1000px;}

<ul id="yw0"> 
<li><a class="" href="#">Спорт</a> 
<ul id="yw1"> 
<li><a href="#" class="">Футбол</a></li> 
<li><a href="#" class="">Хоккей</a></li> 
<li><a href="#" class="">Баскетбол</a></li> 
<li><a href="#" class="">Единоборства</a></li> 
<li><a href="#" class="">Спортивные шоу</a></li> 
<li><a href="#" class="">Экстримальный спорт</a></li> 
<li><a href="#" class="">Автоспорт</a></li> 
<li><a href="#" class="">Танцевальный спорт</a></li> 
<li><a href="#" class="">Зимние виды</a> 
<ul id="yw2"> 
<li><a href="#">Лыжи</a></li> 
<li><a href="#">Сноуборд</a></li> 
</ul> 
</li> 
<li><a href="#" class="">Другие виды</a> 
<ul id="yw2"> 
<li><a href="#" class="">Волейбол</a></li> 
<li><a href="#" class="">Пляжный волейбол</a></li> 
<li><a href="#" class="">Велоспорт</a></li> 
<li><a href="#" class="">Теннис</a></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul>

Answer 1

Нужно убрать margin у #yw1 li

#yw1 {display:none; 
flex-direction:column; 
position:absolute; 
z-index:10; 
background-color:#000; 
border: 2px solid #ffc500; 
}  
#yw1 li { 
padding:5px; 
//margin:5px; 
z-index:10; 
}  
#yw0 li:hover #yw1{display:flex;}  
#yw1 li:hover #yw2{display:flex;}  
#yw2 { 
display:none; 
position:relative; 
justify-content:flex-end; 
z-index:2000; 
background-color:#000; 
border: 2px solid #ffc500; 
}  
#yw2 li { 
padding:5px; 
margin:5px; 
z-index:2000; 
} 
#yw0 li:hover #yw1{display:flex;} 
#yw0 {margin-bottom:1000px;}

<ul id="yw0"> 
<li><a class="" href="#">Спорт</a> 
<ul id="yw1"> 
<li><a href="#" class="">Футбол</a></li> 
<li><a href="#" class="">Хоккей</a></li> 
<li><a href="#" class="">Баскетбол</a></li> 
<li><a href="#" class="">Единоборства</a></li> 
<li><a href="#" class="">Спортивные шоу</a></li> 
<li><a href="#" class="">Экстримальный спорт</a></li> 
<li><a href="#" class="">Автоспорт</a></li> 
<li><a href="#" class="">Танцевальный спорт</a></li> 
<li><a href="#" class="">Зимние виды</a> 
<ul id="yw2"> 
<li><a href="#">Лыжи</a></li> 
<li><a href="#">Сноуборд</a></li> 
</ul> 
</li> 
<li><a href="#" class="">Другие виды</a> 
<ul id="yw2"> 
<li><a href="#" class="">Волейбол</a></li> 
<li><a href="#" class="">Пляжный волейбол</a></li> 
<li><a href="#" class="">Велоспорт</a></li> 
<li><a href="#" class="">Теннис</a></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul>