Пункт меню с вложенным списком не остается активным

269

01 апреля 2018, 18:16

Приветствую! Есть меню. У одного пункта этого меню есть вложенный список. Как сделать, чтобы при наведении на элементы этого вложенного списка, основной пункт этого списка оставался активным (то есть его цвет оставался таким же, как и при наведении просто на этот пункт)?

Тобишь, хочу добиться такого же результата, как на фото.

Answer 1

Для этого нужно чтобы ваш .dropdown класс, с выпадающим меню, был ребенком для элемента у которого описан hover-эффект. Например:

ul > li { 
position: relative; 
display: inline-block 
} 
 
.dropdown { 
display: none; 
position: absolute; 
top: 100%; 
left: -40px; 
} 
nav > ul > li:hover { /* Элемент меню с подсветкой цвета */ 
color: red; 
} 
nav > ul > li:hover .dropdown { /* Показываем выпадающее меню */ 
display: block; 
} 
nav > ul > li:hover ul li { 
color: #000000; 
} 
nav > ul > li:hover ul li:hover { 
color: red; 
}

<nav> 
<ul> 
	<li>Home</li> 
	<li>My Blogs  
		<div class="dropdown"> 
			<ul> 
				<li>Blog 1</li> 
				<li>Blog 2</li> 
				<li>Blog 3</li> 
				<li>Blog 4</li> 
			</ul> 
		</div> 
	</li> 
	<li>Benefits</li> 
	<li>Contacts</li> 
	<li>About</li> 
</ul> 
</nav>