CSS - Как сохранить цвет при наведении под их подменю?

Я пытаюсь создать это навигационное меню, но у меня есть проблема с цветом при наведении CSS. Моя проблема в том, как я могу сохранить цвет при наведении на их родительские элементы.

Пример: Если указатель мыши находится на Services SERVICES 2.3.3.3, как сохранить следующие цвета:

СЕРВИСЫ
УСЛУГИ 2
УСЛУГИ 2.3
УСЛУГИ 2.3.3
УСЛУГИ 2.3.3.3

Или, если указатель мыши находится на Services SERVICES 2.1, как сохранить следующие цвета:

СЕРВИСЫ
УСЛУГИ 2
УСЛУГИ 2.1

Как я могу сохранить цвета при наведении, подобные этому, Спасибо.

@font-face{
    font-family: 'oxygen-regular';
        src: url('../fontlar/Oxygen-Regular.eot');
        src: url('../fontlar/Oxygen-Regular.eot') format('embedded-opentype'),
        url('../fontlar/Oxygen-Regular.woff') format('woff'),
        url('../fontlar/Oxygen-Regular.woff2') format('woff2'),
        url('../fontlar/Oxygen-Regular.ttf') format('truetype'),
        url('../fontlar/Oxygen-Regular.svg') format('svg');
        font-weight: 400;
}

@font-face{
    font-family: 'oxygen-bold';
        src: url('../fontlar/Oxygen-Bold.eot');
        src: url('../fontlar/Oxygen-Bold.eot') format('embedded-opentype'),
        url('../fontlar/ROxygen-Bold.woff') format('woff'),
        url('../fontlar/Oxygen-Bold.woff2') format('woff2'),
        url('../fontlar/Oxygen-Bold.ttf') format('truetype'),
        url('../fontlar/Oxygen-Bold.svg') format('svg');
}

@font-face{
    font-family: 'raleway-bold';
        src: url('../fontlar/Raleway-Bold.eot');
        src: url('../fontlar/Raleway-Bold.eot') format('embedded-opentype'),
        url('../fontlar/Raleway-Bold.woff') format('woff'),
        url('../fontlar/Raleway-Bold.woff2') format('woff2'),
        url('../fontlar/Raleway-Bold.ttf') format('truetype'),
        url('../fontlar/Raleway-Bold.svg') format('svg');
}

@font-face{
    font-family: 'raleway-regular';
        src: url('../fontlar/Raleway-Regular.eot');
        src: url('../fontlar/Raleway-Regular.eot') format('embedded-opentype'),
        url('../fontlar/Raleway-Regular.woff') format('woff'),
        url('../fontlar/Raleway-Regular.woff2') format('woff2'),
        url('../fontlar/Raleway-Regular.ttf') format('truetype'),
        url('../fontlar/Raleway-Regular.svg') format('svg');
}

@font-face{
    font-family: 'raleway-semibold';
        src: url('../fontlar/Raleway-SemiBold.eot');
        src: url('../fontlar/Raleway-SemiBold.eot') format('embedded-opentype'),
        url('../fontlar/Raleway-SemiBold.woff') format('woff'),
        url('../fontlar/Raleway-SemiBold.woff2') format('woff2'),
        url('../fontlar/Raleway-SemiBold.ttf') format('truetype'),
        url('../fontlar/Raleway-SemiBold.svg') format('svg');
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.menu {
    width: 100%;
    height: auto;
    margin: 100px 0 0 0;
    padding: 0 0 0 60px;
    float: left;
}

.menu ul {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    float: left;
}
.menu ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
}
.menu ul li a {
    color: #0066cc;
    font-size: 13px;
    text-transform: capitalize;
    font-family: raleway-bold;
    background: #fff;
    padding: 10px 20px;
    /*border-right: #502b06 1px solid;*/
    text-decoration: none;
    transition: all .3s ease-in-out;
    float: left;
}
.menu ul li a:hover {
    background: #ff6600;
    color: #fff;
}
.menu ul li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
    background-color: black;
}
.menu ul li > ul li {
    width:  100%;

}
.menu ul li > ul li a {
    width:  100%;
    border-bottom: #0066cc 1px solid;
    border-right: none;
    background-color: white;
    border: 1px solid #eee;
}
.menu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
}
.menu ul li:hover > ul li ul {
    left: 100%;
    top: 0;
}


@media only screen and (max-width:767px){
div ul li a span.fas {
    display: none;
    }
}

<!DOCTYPE html>
<html lang = "tr">

<head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>METE MAKİNA</title>
    <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity = "sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin = "anonymous">
</head>

<body>
    <div tabindex = "0" class = "menu">
        <ul>
            <li><a href = "#">HOME</a></li>
            <li><a href = "#">ABOUT</a></li>
            <li><a href = "#">SERVICES <span class = "fas fa-angle-down"></span></a>
                <ul>
                    <li><a href = "#">SERVICES 1</a></li>
                    <li><a href = "#">SERVICES 2 <span class = "fas fa-angle-right"></span></a>
                        <ul>
                            <li><a href = "#">SERVICES 2.1</a></li>
                            <li><a href = "#">SERVICES 2.2</a></li>
                            <li><a href = "#">SERVICES 2.3 <span class = "fas fa-angle-right"></span></a>
                                <ul>
                                    <li><a href = "#">SERVICES 2.3.1</a></li>
                                    <li><a href = "#">SERVICES 2.3.2</a></li>
                                    <li><a href = "#">SERVICES 2.3.3 <span class = "fas fa-angle-right"></span></a>
                                        <ul>
                                            <li><a href = "#">SERVICES 2.3.3.1</a></li>
                                            <li><a href = "#">SERVICES 2.3.3.2</a></li>
                                            <li><a href = "#">SERVICES 2.3.3.3</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href = "#">JOBS</a></li>
                </ul>
            </li>

            <li><a href = "#">REFERENCES</a></li>
            <li><a href = "#">CONTACT US</a></li>
        </ul>
    </div>
</body>

</html>

css html

16.03.2019 09:25

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это. Я изменил пару ваших классов наведения, чтобы сосредоточиться на элементах li вместо элементов a, и удалил черный цвет фона.

body {
    margin: 0;
    padding: 0;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.menu {
    width: 100%;
    height: auto;
    margin: 100px 0 0 0;
    padding: 0 0 0 60px;
    float: left;
}
.menu ul {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    float: left;
}
.menu ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
}
.menu ul li a {
    color: #0066cc;
    font-size: 13px;
    text-transform: capitalize;
    font-family: raleway-bold;
    padding: 10px 20px;
    text-decoration: none;
    transition: all .3s ease-in-out;
    float: left;
}
.menu ul li:hover {
    background-color: #ff6600;
    color: #fff;
}
.menu ul li ul li:hover {
    background-color: #ff6600;
    color: #fff;
}
.menu ul li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
}
.menu ul li > ul li {
    width:  100%;
}
.menu ul li > ul li a {
    width:  100%;
    border-bottom: #0066cc 1px solid;
    border-right: none;
    border: 1px solid #eee;
}
.menu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
}
.menu ul li:hover > ul li ul {
    left: 100%;
    top: 0;
}
@media only screen and (max-width:767px){
div ul li a span.fas {
    display: none;
    }
}

<div tabindex = "0" class = "menu">
  <ul>
    <li><a href = "#">HOME</a></li>
    <li><a href = "#">ABOUT</a></li>
    <li><a href = "#">SERVICES <span class = "fas fa-angle-down"></span></a>
      <ul>
        <li><a href = "#">SERVICES 1</a></li>
        <li><a href = "#">SERVICES 2 <span class = "fas fa-angle-right"></span></a>
          <ul>
            <li><a href = "#">SERVICES 2.1</a></li>
            <li><a href = "#">SERVICES 2.2</a></li>
            <li><a href = "#">SERVICES 2.3 <span class = "fas fa-angle-right"></span></a>
              <ul>
                <li><a href = "#">SERVICES 2.3.1</a></li>
                <li><a href = "#">SERVICES 2.3.2</a></li>
                <li><a href = "#">SERVICES 2.3.3 <span class = "fas fa-angle-right"></span></a>
                  <ul>
                    <li><a href = "#">SERVICES 2.3.3.1</a></li>
                    <li><a href = "#">SERVICES 2.3.3.2</a></li>
                    <li><a href = "#">SERVICES 2.3.3.3</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href = "#">JOBS</a></li>
      </ul>
    </li>
    <li><a href = "#">REFERENCES</a></li>
    <li><a href = "#">CONTACT US</a></li>
  </ul>
</div>

Спасибо, теперь он отлично работает, моя проблема, которую я даю: наведите курсор, и я добавляю фоновый цвет.

— 17.03.2019 11:26

У меня есть еще один вопрос, как я могу исправить подменю, чтобы выйти за пределы экрана? Как я могу изменить направление открытия подменю вправо или за пределы экрана? если подменю выходит за пределы экрана, как я могу изменить направление открытия подменю?

— 17.03.2019 11:29

16.03.2019 18:06