下拉菜单问题（2）-HTML5和CSS

Question

我是编码方面的新手，正在为班级的最后一个项目进行研究。 就像网页101：HTML5的基本知识和一点CSS。 我们为课堂制作的演示看起来像是90年代的。 简单是可以的，但是我真的想挑战自己，所以我正在尝试更复杂的东西。

TL; DR我的技能为零，我的代码可能很凌乱，请多多包涵！

我在制作导航菜单时遇到了麻烦。 也许你们之一可以帮助我:)

当我将鼠标悬停在带纹理的金属栏中的每个项目上时，会出现血液飞溅/油漆/番茄酱。 “内容”具有一个下拉菜单，当将鼠标悬停在其中的列表项上时，该菜单会更改颜色。

但...

1）文本链接不见了。 我不知道它们发生了什么，但是我确实知道在我向背景颜色添加“乘不透明度”之前，它们已经消失了。 我想也许是在我悬停更改BG颜色之后。 我需要链接为纯白色。

2）当我将鼠标悬停在下拉列表项上时，有什么办法可以使“内容”显示为红色？ （而不是仅当我将鼠标悬停在“内容”本身上时？）

这是我的代码，这是精灵图片

万一您需要它。

编辑：这是JSfiddle

http://jsfiddle.net/dkxovdj1/

非常感谢！

> ul#nav {
     margin:0 0 0 0; 
     padding:0; 
     list-style:none;
     clear: both;     
}

ul#nav ul.dd li a {text-decoration: none;
                   color: white;}



#nav li {

     text-indent:-9999px; 
     display:inline; 
     float:left; 
     width: 495px;
    position: relative;
}

#nav li a {
    background:url(navbar_main2.jpg) no-repeat; 
    width: 495px; 
    height: 101px; 
    display:block;
}


 #nav li.nav-1 {width:144px; height:154px;}
 #nav li.nav-1 a:hover{background-position:0px -101px;}
 #nav li.nav-1 a{background-position:0px 0px;}   

 #nav li.nav-2 {width:151px; height:154px;}  
 #nav li.nav-2 a:hover{background-position:-144px -101px;}
 #nav li.nav-2 a{background-position:-144px 0px;} 

 #nav li.nav-3 {width:308px; height:154px;}  
 #nav li.nav-3 a:hover{background-position:-295px -101px;} 
 #nav li.nav-3 a{background-position:-295px 0px;} 


#nav li ul.dd {
    display: none;
    position: absolute;
    top: 101px;
    left: 0px;
    width: 100px;
    height: 175px;
    background-color: #524f4a;
    mix-blend-mode: multiply; 
    line-height: 25px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    opacity: 0.7;
    text-align: center;


}
#nav li:hover ul.dd{
    display: block;
    }
}
#nav li ul.dd li{
    text-align: center;
    position: relative;
    margin: 0 px;
    text-indent: 0;
    width: 115px;
    height: 25px;

    }


#nav li ul.dd li a{
    top: 7px;
    background: none;
    display: block;
    width: 105px;
    height: 25px;
    background-color: black;
    text-align: center;
    border: 1px solid #CCC;
    border-radius: 7px;
    margin: 2px;
}


#nav ul.dd li:hover a:hover {background-color: #ffde43;}

ul.dd li {position: absolute; right: 24px; top: 8px;}

Answer 1

文字未显示的问题是拼写错误。 您的小提琴中有以下内容：

#nav li:hover ul.dd {
    display: block;
    } /* <-- should not be here */
}

悬停状态可以修改为#nav li.nav-1:hover a而不是#nav li.nav-1 a:hover 。 将鼠标悬停在子菜单上时，应该显示红色

演示： http ： //jsfiddle.net/w0hq3L06/

编辑：
根据这里的评论 ，

background-color: #524f4a;
mix-blend-mode: multiply;

应该

background-color: rgba(82, 79, 74, 0.7);
background-blend-mode: multiply;

并且应完全删除#nav li ul.dd样式上的不透明度。
演示： http ： //jsfiddle.net/w0hq3L06/2/