css - 尝试使用图像而不是文本创建下拉导航菜单，需要帮助链接

Question

我一直在尝试找到一种方法来为我的导航提供带有图像（不是文本）的下拉菜单，我似乎找到了解决方案，但现在我的问题是添加图像链接。我通过这篇文章用 CSS 完成了这一切：

带图像的下拉选择

我对 JavaScript 不是很熟悉，也许这样做会更容易，但我终于让它与上面的编码一起工作，我只是不知道如何添加链接。

这是我的CSS：

/* 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;
}

这是我的html：

<div id="image-dropdown"><input checked="checked"
id="line1" name="line-style" value="1"
type="radio" /><label for="line1"></label>
<input id="line2" name="line-style" value="2"
type="radio" /><label for="line2"></label><input
id="line3" name="line-style" value="3"
type="radio" /><label for="line3"></label><input
id="line4" name="line-style" value="4"
type="radio" /><label for="line4"></label><input
id="line5" name="line-style" value="5"
type="radio" /><label for="line5"></label><input
id="line6" name="line-style" value="6"
type="radio" /><label for="line6"></label><input
id="line7" name="line-style" value="7"
type="radio" /><label for="line7"></label></div>

任何帮助将不胜感激，这几天我一直在搞砸......

Answer 1