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

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

0 голосов
/ 16 марта 2019

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

Пример: Если указатель мыши на Сервисах УСЛУГ 2.3.3.3, как сохранить цвет при наведении, выполните следующие действия:

  1. УСЛУГИ
  2. УСЛУГИ 2
  3. УСЛУГИ 2.3
  4. УСЛУГИ 2.3.3
  5. УСЛУГИ 2.3.3.3

Или, если указатель мыши на Сервисах СЕРВИС 2.1, как сохранить цвет при наведении, будет:

  1. УСЛУГИ
  2. УСЛУГИ 2
  3. УСЛУГИ 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>

1 Ответ

1 голос
/ 16 марта 2019

Попробуй это. Я изменил пару ваших классов при наведении курсора на элементы 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...