下拉菜单问题 (2) - HTML5 & CSS

Question

我是运行编码新手，正在为我的 class 完成期末项目。就像网页 101：HTML5 中的基础知识和一点 CSS。我们为 class 制作的演示看起来像是来自 90 年代。简单就好，但我真的很想挑战自己，所以我尝试了一些更复杂的东西。

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

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

当我将鼠标悬停在带纹理的金属条中的每个项目上时，会出现血 splatter/paint/ketchup。 "CONTENTS" 有一个下拉菜单，当鼠标悬停在其中的列表项上时会改变颜色。

但是...

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

2) 当我将鼠标悬停在下拉列表项上时，有没有什么办法可以让 "CONTENTS" 显示为红色飞溅？（而不是仅当我将鼠标悬停在 "CONTENTS" 上时？）

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

以备不时之需。

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

编辑：
每 ,

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/

下拉菜单问题 (2) - HTML5 & CSS

Drop Down menu issues (2) - HTML5 & CSS

html

css

css-sprites

navigationbar

drop-down-menu