下拉菜单问题（二）——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/

编辑：
每the comment here，

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/