title: Drop Down menu issues (2) - HTML5 & CSS
body: <p>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.</p>
  
  <p>TL;DR I have zero skills and my code is probably messy, please bear with me!</p>
  
  <p>I ran into some trouble with the navigation menu I'm making. Maybe one of you can help me out :)</p>
  
  <p>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.</p>
  
  <p>But...</p>
  
  <p>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.</p>
  
  <p>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?)</p>
  
  <p>Here is my code, and here is the sprite image</p>
  
  <p><a href="https://i.stack.imgur.com/xpGwF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xpGwF.jpg" alt="enter image description here"></a></p>
  
  <p>in case you need it.</p>
  
  <p>EDIT: Here is the JSfiddle</p>
  
  <p><a href="http://jsfiddle.net/dkxovdj1/" rel="nofollow noreferrer">http://jsfiddle.net/dkxovdj1/</a></p>
  
  <p>Thanks so much!</p>
  
  <pre><code>&gt; 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;}
  </code></pre>