Сразу хочу поблагодарить этот прекрасный портал и умнейших людей которые выручают меня пока я развиваюсь!
Ближе к делу: какой есть способ закрепить (сохранить) выделение при наведении на пункт меню, при условии - когда курсор заходит в выдающий список? Еще раз - когда человек наводит на ссылки в выпадающем меню, то активная (основная)вкладка меню подсвечивается.
Код прилагаю)
.header-main {
background-color: white;
}
.menu {
list-style: none;
padding-left: 0;
font-family: Ubuntu, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 16px;
}
.main-menu {
display: flex;
justify-content: space-between;
align-items: center;
list-style-type: none;
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 16px;
letter-spacing: 0.05em;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.main-menu-item {
position: relative;
margin: 0 6px;
}
.dropdown-main-menu-item {
position: relative;
margin: 0 6px;
}
.dropdown-main-menu-item::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 0;
background: #e30613;
-webkit-transition: width 175ms;
-moz-transition: width 175ms;
-o-transition: width 175ms;
-ms-transition: width 175ms;
transition: width 175ms;
}
.main-menu_link {
color: #1A2B48;
text-decoration: none;
padding: 27px 6px;
cursor: pointer;
}
.dropdown_item {
text-decoration: none;
color: #1A2B48;
}
.dropdown_link {
text-decoration: none;
color: #1A2B48;
padding: 8px 0;
display: block;
white-space: nowrap;
}
.dropdown_menu {
position: absolute;
justify-content: space-between;
align-items: center;
list-style-type: none;
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 16px;
letter-spacing: 0.05em;
padding: 0;
flex-wrap: wrap;
z-index: 200;
margin-top: 10px;
min-width: 185px;
background: white;
margin-top: 7px;
text-align: left;
min-width: 100px;
border-radius: 8px;
padding: 22px 15px;
right: -70%;
top: 60px;
padding: 22px 30px;
box-shadow: 0px 10px 34px
rgba(175, 196, 208, 0.47);
display: none;
}
.main-menu_link:hover {
color: #5091FA;
}
.children {
right: -10%;
}
.drive {
right: -95%;
}
.dropdown_link:hover {
color: #5091FA;
}
.dropdown-main-menu-item:hover .dropdown_menu {
display: block;
}
.main-menu__arrow {
display: inline-block;
vertical-align: middle;
width: 8px;
height: 6px;
background: url('../img/arrow_gray.svg')
center center no-repeat;
-webkit-background-size: 8px 6px;
-moz-background-size: 8px 6px;
background-size: 8px 6px;
margin-top: 0;
margin-left: 5px;
}
<div class="header-main">
<div class="menu">
<nav>
<ul class="main-menu">
<div class="header_logo">
<a href="/">
<img src="img/logo2.png" alt="лого" class="logo">
</a>
</div>
<li class="main-menu-item">
<a href="#" class="main-menu_link ">Виллы</a>
</li>
<li class="main-menu-item "><a href="#" class="main-menu_link ">Виллы 2</a>
</li>
<li class="main-menu-item "><a href="#" class="main-menu_link ">Дома</a>
</li>
<li class="main-menu-item "><a href="#" class="main-menu_link ">Аппартаменты</a>
</li><li class="dropdown-main-menu-item">
<div class="main-menu_link">Районы
<div class="main-menu__arrow"></div>
</div>
<ul class="dropdown_menu">
<li class="dropdown_item"><a href="#" class="dropdown_link">хорошево</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">тверская</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">Отрадное</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">войковскй</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">царицино</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">динамо</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">маяковская</a>
</li>
</ul>
</li>
<li class="dropdown-main-menu-item">
<div class="main-menu_link">дети
<div class="main-menu__arrow"></div>
</div>
<ul class="dropdown_menu children">
<li class="dropdown_item"><a href="#" class="dropdown_link"> водитель</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link"> шеф-повар</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">Уход</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link"> прогулки</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link"> экскурсия</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">Аквапарк</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">Организация</a>
</li></ul>
</li>
<li class="dropdown-main-menu-item">
<div class="main-menu_link">дайвинг!
<div class="main-menu__arrow"></div>
</div>
<ul class="dropdown_menu drive">
<li class="dropdown_item"><a href="#" class="dropdown_link">самолеты</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">яхты</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">машины</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link"> прогулки</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">серфинг</a>
</li><li class="dropdown_item"><a href="#" class="dropdown_link">Аквапарк</a>
</li></ul>
</li>
<li class="main-menu-item "><a href="#" class="main-menu_link ">Блог</a>
</li>
<li class="main-menu-item "><a href="#" class="main-menu_link ">О компании</a>
</li>
<li class="main-menu-item "><a href="#" class="main-menu_link ">Контакты</a>
</li>
</ul>
</nav>
</div>
</div>