使整个菜单项可点击

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