title: Trying to create a drop-down navigation menu with images instead of text, need assistance linking
body: <p>I have been trying to find a way to have a drop down menu with images (not text) for my navigation and I seem to have found a solution but now my problem is adding a link to the images. I have done this all with CSS via this post: </p>
  
  <p><a href="https://stackoverflow.com/questions/9508029/dropdown-select-with-images#">Dropdown select with images</a></p>
  
  <p>I am not very familiar with JavaScript, maybe it would be easier to do it that way but I finally got it to work somewhat with the above coding, I just can't figure out how to add links. </p>
  
  <p>Here is my CSS:  </p>
  
  <pre><code>/* Drop-down styling */   
  
  image-dropdown {
  /*style the "box" in its minimzed state*/
  border:0px solid black; 
  width:192px; 
  height:80px; 
  overflow:hidden;
  /*animate the dropdown collapsing*/
  transition: height 0.1s;
  }
  
  #image-dropdown:hover {
  /*when expanded, the dropdown will get native means of scrolling*/
  height:350px; 
  overflow-y:visible;
  /*animate the dropdown expanding*/
  transition: height 0.5s;
  z-index: 100;
  display: block;
  position: relative;
  }
  
  #image-dropdown input {
  /*hide the nasty default radio buttons!*/
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  }
  
  #image-dropdown label[for=line1] {
  /*style the labels to look like dropdown options*/
  display:none; 
  margin:2px; 
  height:80px; 
  opacity:0.2; 
  background:url(nav_02.jpg);
  z-index: 100;
  }
  
  label[for=line2]  {
  display:none; 
  margin:2px; 
  height:50px; 
  opacity:0.2;
  background-image:url(subnav_02.jpg); 
  z-index: 100;
  } 
  
  label[for=line3]   {
  display:none; 
  margin:2px; 
  height:50px; 
  opacity:0.2;
  background-image:url(subnav_03.jpg);
  z-index: 100;
  }
  
  label[for=line4]   {
  display:none; 
  margin:2px; 
  height:50px; 
  opacity:0.2;
  background-image:url(subnav_06.jpg);  
  }
  
  label[for=line5]   {
  display:none; 
  margin:2px; 
  height:50px; 
  opacity:0.2;
  background-image:url(subnav_08.jpg);
  }
  
  label[for=line6]   {
  display:none; 
  margin:2px; 
  height:50px; 
  opacity:0.2;
  background-image:url(subnav_10.jpg);
  }
  
  
  #image-dropdown:hover label{
  /*this is how labels render in the "expanded" state.
   we want to see only the selected radio button in the collapsed menu,
   and all of them when expanded*/
  display:block;
  opacity: 1; 
  }
  
  #image-dropdown input:checked + label {
  /*tricky! labels immediately following a checked radio button
    (with our markup they are semantically related) should be fully opaque
    and visible even in the collapsed menu*/
  opacity:1 !important; display:block;
  }
  </code></pre>
  
  <p>and here is my html:</p>
  
  <pre><code>&lt;div id="image-dropdown"&gt;&lt;input checked="checked"
  id="line1" name="line-style" value="1"
  type="radio" /&gt;&lt;label for="line1"&gt;&lt;/label&gt;
  &lt;input id="line2" name="line-style" value="2"
  type="radio" /&gt;&lt;label for="line2"&gt;&lt;/label&gt;&lt;input
  id="line3" name="line-style" value="3"
  type="radio" /&gt;&lt;label for="line3"&gt;&lt;/label&gt;&lt;input
  id="line4" name="line-style" value="4"
  type="radio" /&gt;&lt;label for="line4"&gt;&lt;/label&gt;&lt;input
  id="line5" name="line-style" value="5"
  type="radio" /&gt;&lt;label for="line5"&gt;&lt;/label&gt;&lt;input
  id="line6" name="line-style" value="6"
  type="radio" /&gt;&lt;label for="line6"&gt;&lt;/label&gt;&lt;input
  id="line7" name="line-style" value="7"
  type="radio" /&gt;&lt;label for="line7"&gt;&lt;/label&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any assistance would be GREATLY appreciated, I've been messing around with this for days...</p>