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

现在，父菜单在悬停时有一个不透明度移动，这也被转移到子菜单（当前和上一个）。我希望子菜单有一个清晰的背景，以便父菜单的不透明度带是唯一可见的东西。有没有一种方法可以将li类用于子菜单，从而使其免于管理父菜单的li类。我一直在尝试不同的东西，但似乎不能使它正常工作

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添加了颜色：

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

希望您想要这个。

这是最新的。我刚刚为以下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;
}

---

希望你想要这个。

我不明白。您希望父背景可见，而子背景不可见？在你的小提琴里，这有用吗？还是希望子菜单项显示不受不透明度影响的背景？或者你希望父菜单的背景只隐藏在子菜单项所在的位置？我没有真正阅读你的帖子，因为它很长，但我认为你只需要使用rgba而不是不透明。我希望子菜单没有不透明性，现在父菜单和子菜单上都有不透明性，这使它看起来像一个浅灰色的孩子-我希望它是所有相同的灰色。这更有意义吗…？好吧，我通过使用：>li>a:hover解决了这个问题，现在的问题是，当我将鼠标悬停在子菜单上时，父菜单上的鼠标悬停消失了，必须有一种方法将子菜单与父菜单包装在一起？而且我刚刚意识到我有错误的JSFIDLE链接，所以我的问题可能没有意义，我不明白。您希望父背景可见，而子背景不可见？在你的小提琴里，这有用吗？还是希望子菜单项显示不受不透明度影响的背景？或者你希望父菜单的背景只隐藏在子菜单项所在的位置？我没有真正阅读你的帖子，因为它很长，但我认为你只需要使用rgba而不是不透明。我希望子菜单没有不透明性，现在父菜单和子菜单上都有不透明性，这使它看起来像一个浅灰色的孩子-我希望它是所有相同的灰色。这更有意义吗…？好吧，我通过使用：>li>a:hover解决了这个问题，现在的问题是，当我将鼠标悬停在子菜单上时，父菜单上的鼠标悬停消失了，必须有一种方法将子菜单与父菜单包装在一起？而且我刚刚意识到我有错误的JSFIDLE链接，所以我的问题可能没有意义