CSS - 如何在子菜单下保持悬停颜色？

问题描述 投票：0回答：1

我尝试构建导航菜单，但我有一些CSS悬停颜色问题。我的问题是，我如何在其父项上保持悬停颜色。

示例：如果服务服务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>
css html5
1个回答
1
投票

试试这个。我更改了几个悬停类，专注于li元素而不是元素，并删除了黑色背景颜色。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.