Drop Down menu issues (2) - HTML5 & CSS - css

Question

I am brand new at coding and am working on the final project for my class. It's like web page 101: the very basics in HTML5 and a little CSS. The demos we built for class look like they're from the 90s. Simple is fine, but I really want to challenge myself so I am attempting something more complicated.
TL;DR I have zero skills and my code is probably messy, please bear with me!
I ran into some trouble with the navigation menu I'm making. Maybe one of you can help me out :)
When I mouse over each item in the textured metal bar, blood splatter/paint/ketchup shows up. "CONTENTS" has a drop down menu that changes color when hovering over a list item in it.
But...
1) The text links are gone. I don't know what happened to them, but I do know that they had vanished BEFORE I added the Multiply opacity to the background-color. I think maybe it was after I had the BG color change on hover. I need the links to be solid white.
2) Is there any way to have "CONTENTS" show as red-splattered while I am hovering over the drop down list items? (as opposed to only when I am hovering over "CONTENTS" itself?)
Here is my code, and here is the sprite image
in case you need it.
EDIT: Here is the JSfiddle
http://jsfiddle.net/dkxovdj1/
Thanks so much!
> 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

The issue with the text not showing up is a typo. You have the following in your fiddle:
#nav li:hover ul.dd {
display: block;
} /* <-- should not be here */
}
The hover state can be amended to be #nav li.nav-1:hover a instead of #nav li.nav-1 a:hover. That should get the red to display when hovering over the submenu
Demo: http://jsfiddle.net/w0hq3L06/
Edit:
Per the comment here,
background-color: #524f4a;
mix-blend-mode: multiply;
should be
background-color: rgba(82, 79, 74, 0.7);
background-blend-mode: multiply;
and the opacity on the #nav li ul.dd style should be dropped entirely.
Demo: http://jsfiddle.net/w0hq3L06/2/