使整個菜單項可點擊

Question

我似乎有問題與我的CSS使整個菜單項可點擊，而不僅僅是文本。 正如您從突出顯示的屏幕截圖中所看到的，菜單不會擴展到div的100％高度。結果，只有菜單的文本是可點擊的，而不是圍繞它的整個框。我如何使整個盒子可點擊？ （下面的代碼）

#header 
{ 
    background-color: black; 


} 
#header .menu 
{ 
display: inline; 
text-decoration: none; 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 100%; 
height: 100% 
position: relative; 
text-transform:uppercase; 



} 


#header .menu ul{ 
display: inline-block; 

} 
#header .menu li { 
display: inline-block; 
padding: 20px; 
width: auto; 
color: white; 
height: 100%; 
position: relative; 

} 
#header .menu a{ 
display: block; 
width: 100% 
height: 100%; 
text-decoration: none; 
color: white; 
font-family: Helvetica; 

} 
#header .menu ul li a{ 
display: block; 
} 
#header .menu li a{ 
position: relative; 
} 

感謝。

Answer 1

用這塊CSS

#header .menu 
{ 
    display: inline; 
text-decoration: none; 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 100%; 
height: 100% 
position: relative; 
    text-align: center; 
text-transform:uppercase; 
} 

#header .menu li { display: inline; float:left; } 

#header .menu li a 
{ 
text-decoration: none; 
padding: .2em 1em; 
color: #fff; 
background-color: #000; 
font-family: Helvetica; 
} 

#header ul li a:hover 
{ 
color: Yellow; 
background-color: #000; 
} 

這裏是一個Demo