下拉菜單鏈接不工作

Question

我建立一個簡單的列表並添加到它的CSS。現在垂直菜單工作..問題在於CSS的部分。列表項目區域比鏈接本身更大。這意味着如果用戶點擊該區域，則不會導致鏈接區域不覆蓋所有列表項目區域。

#sidebar1 li { 
    list-style: none; 
    position: relative; 
    width: 120px; 
    height: 30px; 
    padding: 0 20px; 
    background-color: black; 
    line-height: 30px; 
    cursor: pointer; 
} 

#sidebar1 li a { 
    text-decoration: none; 
    color: white;  
} 

我想要做的是匹配鏈接填充或寬度與列表寬度。因此，無論用戶點擊菜單項目，鏈接都會被點擊。那問題是，我嘗試過了，它沒有工作

Answer 1

只需使用display: block使a元素填滿父元素的可用水平寬度：

#sidebar1 li a{ 
    text-decoration:none; 
    color: white; 
    display: block; 
    height: 100%; 
} 

的height: 100%迫使a繼承全高的父元素。從父項li中移除填充項，否則將在a和li的邊緣之間強制執行一個空格。

此外，在您的li我不僅取消了padding（這只是導致問題如上所述），而且還cursor: pointer，就像用戶將鼠標懸停在鏈接光標會自動改變，如果他們不通過鏈接，然後將光標的類型，即中pointer，當點擊不會產生任何效果僅僅是迷惑：

#sidebar1 li { 
    list-style: none; 
    position: relative; 
    width:120px; 
    height: 30px; 
    background-color: black; 
    line-height: 30px; 
} 

Answer 2

移動最造型的A-標籤和修復的幾件事情：

#sidebar1 li{ 
list-style: none; 
position: relative; 
margin:0 <-- added 
padding:0 <-- added. 
} 

#sidebar1 li a{ 
text-decoration:none; 
color: white; 
width:120px; 
height: 30px; 
padding:0 20px; 
background-color: black; 
line-height: 30px; 
cursor:pointer; 
display:block <-- this is important 
}