使用不透明背景时，无法获取 child 元素以在悬停时更改文本颜色

Question

我已经制作了一个简单的 CSS 菜单，带有 drop-down。当 drop-down 可见时，我希望它及其 parent 元素具有部分不透明的背景，并将文本颜色更改为深色。 child UL 做了它应该做的，但 parent 没有。在我看来，文本被 parent 的背景不透明度覆盖了。

我希望它看起来像这样：

但悬停时看起来像这样：

如何在悬停时使 parent object "PORTFOLIO" 深色且背景部分不透明？

jsfiddle

<div id="navigation">

<ul id='mainNav'>
   <li class='active'><a href='index.html'>Home</a></li>
   <li class='hasSub'><a href='#' id='portfolioLink'>PORTFOLIO</a>
      <ul class='subMenu'>
         <li><a href='#'>AUTOMOTIVE</a></li>
         <li><a href='#'>COMMERCIAL</a></li>
         <li><a href='#'>DISTRIBUTION</a></li>
         <li><a href='#'>MANUFACTURING</a></li>
         <li><a href='#'>MULTI-TENNANT</a></li>
         <li><a href='#'>MUNICIPAL</a></li>
         <li><a href='#'>UNDER CONSTRUCTION</a></li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>SERVICES</a></li>   

</ul>
</div>

body{
  font-family:arial;
  font-size:16pt;
}


#navigation{
    width:100%;
    height:30px;
    background:#ff5200;
    color:#fff;
    text-align:center;
}

.subMenu{
    display:none;
}

#navigation > ul > li > a { 
  font-size: .6em;
  letter-spacing: 1px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  padding: 0 10px 0 10px;
}

#navigation > ul > li {
  display: inline-block;
  align:center;
}

#navigation > ul > li:hover > a {
  color: #dddddd;
}

.hasSub:hover{
     background: url("img/75%-transparent-white.png");
     background: rgba(255,255,255,0.75);     
}       

.hasSub:hover a{
    color: #495c5e;
}

.hasSub:hover > .subMenu {
        display: block;
        position:absolute;
    margin-left:-40px;
}

.subMenu{
    list-style-type:none;   
}

.subMenu li{    
  background: url("img/75%-transparent-white.png");
  background: rgba(255,255,255,0.75)  
}

.subMenu li > a{    
    font-size:.6em;
    text-decoration:none;
}

.subMenu li > a:hover{  
    color:#ff5200;  
    font-weight:bold;
}

Answer 1

您正在将悬停时的投资组合菜单设置为浅灰色。给它设置一个较深的颜色，比如黑色。

#navigation > ul > li:hover > a {
  color: #000000;
}

Answer 2

问题是特异性。

#navigation > ul > li:hover > a

比

更具体

.hasSub:hover a

所以前者覆盖了后者，尽管它们的源代码顺序不同，并且 .hasSub 的颜色与标准菜单项相同。

你可以通过改变

来解决它

.hasSub:hover a{
    color: #495c5e;
}

进入

#navigation > ul li.hasSub:hover a{
    color: #495c5e;
}

使用不透明背景时，无法获取 child 元素以在悬停时更改文本颜色

can't get child element to change text color on hover when using opaque background

html

css

menu

opacity