使整个菜单项可单击

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