Сделать весь пункт меню Clickable

Question

У меня, похоже, проблема с моим CSS, что делает весь элемент меню доступным, а не только текст. Как видно из выделенного скриншота, меню не распространяется на 100% высоты div. В результате только текст меню можно щелкнуть, а не весь блок вокруг него. Как сделать все окно доступным? (код ниже)

#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