試圖創建一個帶有圖片而不是文本的下拉導航菜單，需要幫助鏈接

Question

我一直在試圖找到一種方法來爲我的導航有圖像（而不是文本）的下拉菜單，我似乎已經找到一個解決方案，但現在我的問題是添加一個鏈接到圖像。我已經通過這篇文章所做的這一切與CSS：

Dropdown select with images

我不是很熟悉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

我發現this site創建純CSS下拉菜單非常有用

只需將圖像替換爲圖像