css - 下拉菜单问题(二)——HTML5 & CSS

Question

我是编程新手，正在为我的类(class)做期末元素。就像网页 101:HTML5 的基础知识和一点 CSS。我们为类制作的演示看起来像是来自 90 年代。简单就好，但我真的想挑战自己，所以我尝试了一些更复杂的东西。

TL;DR 我的技能为零，我的代码可能很乱，请耐心等待!

我在制作导航菜单时遇到了一些问题。也许你们中的一个可以帮助我 :)

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

但是……

1) 文本链接不见了。我不知道它们发生了什么，但我知道在我向背景颜色添加正片叠底不透明度之前它们已经消失了。我想也许是在我悬停时 BG 颜色发生变化之后。我需要链接为纯白色。

2) 当我将鼠标悬停在下拉列表项上时，有没有什么办法可以让“CONTENTS”显示为红色？ (而不是仅当我将鼠标悬停在“CONTENTS”本身时？)

这是我的代码，这是 Sprite 图像

以备不时之需。

编辑:这是 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

文本未显示的问题是拼写错误。你的 fiddle 中有以下内容:

#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/