內部和外部的鏈接列表元素不工作

Question

我試圖創建一個無序列表，每個元素都有自己的背景圖像（沒有文本，只是圖像），但我遇到了麻煩（至少在Firefox中，它在Safari中工作）讓鏈接工作。在Firefox中，圖片在懸停時發生變化，但不會讓您點擊。我如何讓它在Firefox中工作？我試過了li標籤內外的A標籤。

這裏的CSS ...

#menu { 
    width:107px; 
    height:200px; 
} 

#menu-1, #menu-1-active, #menu-2, #menu-2-active, #menu-3, #menu-3-active, #menu-4, #menu-4-active, #menu-5, #menu-5-active, #menu-6, #menu-6-active { 
    width:107px; 
    height:29px; 
    padding-bottom:5px; 
    background-repeat: no-repeat; 
    display:block; 
    text-indent: -999px; 

} 

#menu-1 { 
    background-image: url(menu1.png); 
} 
#menu-1:hover { 
    background-image: url(menu1on.png); 
} 
#menu-1-active { 
    background-image: url(menu1on.png); 
} 


#menu-2 { 
    background-image: url(menu2.png); 
} 
#menu-2:hover { 
    background-image: url(menu2on.png); 
} 
#menu-2-active { 
    background-image: url(menu2on.png); 
} 

etc 

而這裏的HTML ...

<div id="menu"> 
<ul> 

<a href="1"><li id="menu-1-active"> 
One 
</li></a> 
<a href="2"><li id="menu-2"> 
Two 
</li></a> 
<a href="3"><li id="menu-3"> 
Three 
</li></a> 
<a href="4"><li id="menu-4"> 
Four 
</li></a> 
<a href="5"><li id="menu-5"> 
Five 
</li></a> 
<a href="6"><li id="menu-6"> 
Six 
</li></a> 

</ul> 
</div> 

Answer 1

鏈路需要是<li>內，一開始，爲<li>是塊級元素，而一個<a>是內聯。

此外，設置：懸停在非<a>之上的元素 - 雖然支持像FF等等 - 在我的經驗中，在工作時有點不正常，在舊版IE中根本不起作用。

就個人而言，如果是我寫HTML，它會是這個樣子：

<ul id="menu"> 
    <li id="menu-1-active"><a href="1">One</a></li> 
    <li id="menu-2"><a href="2">Two</a></li> 
    <li id="menu-3"><a href="3">Three</a></li> 
    <li id="menu-4"><a href="4">Four</a></li> 
    <li id="menu-5"><a href="5">Five</a></li> 
    <li id="menu-6"><a href="6">Six</a></li> 
</ul> 

而CSS會像下面這樣：

#menu{ 
    width:107px; 
height:200px; 
} 
#menu li{ 
    padding: 0, 0, 5px; 
} 
#menu li a{ 
    display: block; 
    text-indent: -999px; 
    height: 29px; 
    background: transparent, none, center, center, no-repeat; 
} 

#menu-1 a:link, #menu-1 a:visited { background-image: url(menu1.png); } 
#menu-1 a:hover, #menu-1 a:active, #menu-1-active { background-image: url(menu1on.png); } 

/** Continue on with your other links here... **/ 

Answer 2

你需要把一個標籤的L1標籤內。然後設置一個標籤顯示：block;這將使標籤填滿li標籤內的所有空間，並使整個區域可點擊。

例如：

<style type="text/css" media="screen"> 
    a { 
     display: block; 
    } 
</style> 

<ul> 
    <li id="menu-1-active"><a href="1">One</a></li> 
    <li id="menu-2-active"><a href="3">One</a></li> 
</ul>