css - 父级悬停时的不透明度正在转移到子菜单；如何使用 CSS 防止这种情况

Question

现在父菜单在悬停时有一个不透明度变化，这也被转移到子菜单(当前和上一个)。我希望子菜单具有清晰的背景，以便父级的不透明带是唯一可见的。有没有办法为子菜单使用 li 类，使其免于管理父级的 li 类。我一直在尝试不同的方法，但似乎无法使其正常工作。

Demo

HTML

<div>
    <ul id="mainmenu">
        <li class="liHome">
            <a class="maintextcolour" href="#item-x1y1" id="Home" rel=
            "none">INFO</a>
        </li>

        <li class="liServices">
            <a class="maintextcolour" href="#item-x1y2" id="Services" rel=
            "SubMenuY2">EXHIBITIONS</a>

            <ul class="submenu" id="SubMenuY2">
                <li class="sub1">
                    <a class="maintextcolour" href="#">CURRENT</a>
                </li>

                <li class="sub1">
                    <a class="maintextcolour" href="#">PREVIOUS</a>
                </li>
            </ul>
        </li>

        <li id="liEnvironment">
            <a class="maintextcolour" href="#item-x1y3" id="Environment"
            rel="none">CV</a>
        </li>

        <li id="liCareer">
            <a class="maintextcolour" href="#item-x1y4" id="Career" rel=
            "none">NEWS</a>
        </li>

        <li id="liContact">
            <a class="maintextcolour" href="#item-x1y5" id="Contact" rel=
            "none">MORE</a>
        </li>
    </ul>
</div>

CSS:

@charset  UTF-8;

/* CSS Document */
body {
    background-color: #666;
    background-size: 100%;
    background-repeat: no-repeat;
}

#mainmenu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
}

#mainmenu li {
    clear: left;
    position: relative;
}

#mainmenu a {
    display: block;
    overflow: hidden;
    float: left;
    width: 100%;
    position: relative;
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    padding-left: 20px;
}

#mainmenu li:hover a {
    background-position: 0 0;
    background-color: clear;
    background-color: rgba(255,255,255,0.5);
    width: 100%;
    opacity: 0;
    -webkit-transition: none;
}

#mainmenu li.active a {
    background-position: 0 0;
    background-color: clear;
    width: 100%;
}

.submenu {
    list-style-type: none;
    float: left;
    display: none;
    position: absolute;
    left: 135px;
    top: 0;
    width: auto;
}

#mainmenu li a:hover + .submenu,.submenu:hover {
    display: block;
}

.submenu li {
    display: inline-block;
    clear: none !important;
}

.submenu li a {
    float: right;
    margin-left: 10px;
}

.maintextcolour {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #FFF;
    text-decoration: none;
}

.maintextcolour:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #0FF;
    text-decoration: none;
}

.headertext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
}

Answer 1

这是更新的 Fiddle link .我刚刚为以下 CSS 添加了颜色:

#mainmenu > li:hover > a {
  background-position: 0 0;
  background-color:clear;
    color:#0fffff;
  background-color:rgba(255,255,255,0.5);
   width:100%;
   \
 opacity: 0;
    -webkit-transition: none;
}

希望你想要这个。