0

Сразу хочу поблагодарить этот прекрасный портал и умнейших людей которые выручают меня пока я развиваюсь!

Ближе к делу: какой есть способ закрепить (сохранить) выделение при наведении на пункт меню, при условии - когда курсор заходит в выдающий список? Еще раз - когда человек наводит на ссылки в выпадающем меню, то активная (основная)вкладка меню подсвечивается.

Код прилагаю)

.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>

1 ответ 1

0

Я просто добавил один селектор с псевдоклассом :hover и убрал его у класса .main-menu_link, но при этом у тебя должен остаться этот селектор с ховером, иначе другие ссылки не будут подсвечиваться

 .dropdown-main-menu-item:hover .main-menu_link {
        color: #5091FA;
    }

.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;
}

.dropdown-main-menu-item:hover .main-menu_link {
    color: #5091FA;
}

.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;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <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>
</body>
</html>

3
  • АААААА Спасибо огромное! Спасибо что отозвались) А вы не знаете случайно, как можно еще сделать показ меню в случае если доскроллил до середины страницы, а при попытке скролла вверх - меню появляется и если вниз - исчезает?
    – user432161
    15 мая 2021 в 19:02
  • По поводу доскроливания до середины не знаю, но знаю про такое свойство как position: fixed. Фиксирование элемента. И скорее всего без Jquery не обойтись. Там как раз есть метод scroll
    – Ansel One
    15 мая 2021 в 20:38
  • Хорошо. Спасибочки!
    – user432161
    16 мая 2021 в 8:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.