Question

我在编码方面是全新的，正在为我班级的最终项目工作。它就像网页101：HTML5中的基础知识和一点点CSS。我们为课堂设计的演示看起来像他们从90年代开始。简单就好了，但我真的想挑战自己，所以我正在尝试更复杂的事情。

TL; DR我没有技能，我的代码可能很乱，请耐心等待我！

我在制作导航菜单时遇到了一些麻烦。也许你们中的一个可以帮助我：）

当我将鼠标悬停在纹理金属条中的每个项目上时，会出现血液飞溅/油漆/番茄酱。＆＃34;内容＆＃34;有一个下拉菜单，当鼠标悬停在其中的列表项上时会改变颜色。

但是...

1）文字链接消失了。我不知道发生在他们身上的事情，但我知道他们在将Multiply不透明度添加到背景颜色之前已经消失了。我想也许是在我悬停时改变BG颜色之后。我需要链接为纯白色。

2）有没有办法让＃34; CONTENTS＆＃34;当我将鼠标悬停在下拉列表项目上时显示为红色？（而不是只有当我徘徊在＆＃34;内容＆＃34;本身？）

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

万一你需要它。

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

下拉菜单问题（2） - HTML5＆amp; CSS

1 个答案: