<a> 标签未覆盖 <div> 的正确区域

Question

我有以下：

HTML：

    <div id="about" class="menu1"> <a href="#">About</a></div>
    <div id="aboutsub">
        <div id="team" class="menu2"> <a href="">Team</a></div>
        <div id="experience" class="menu2"> <a href="">Experience</a></div>
        <div id="difference" class="menu2"> <a href="">Difference</a></div>
    </div>

CSS：

.menu1
{
    position: absolute;
    background: red;
    width: 60px;
    height: 21px;
    padding: 15px 20px;
}

.menu1 a
{
    display: inline-block;
    position: absolute;
    color: white;
    text-decoration: none;
}

.menu2
{
    position: absolute;
    background: purple;
    width: 80px;
    height: 42px;
    left: 115px;
}

.menu2 a
{
    padding: 15px 20px;
    color: white;
    text-decoration: none;
}

在此处完全可见： http://jsfiddle.net/snk42/1/embedded/result/

我遇到的问题是，当我检查 #about 内的 <a> 元素时，我看到该区域从“about”一词的左上角开始，而不是填充整个 div。

如何在使整个 div 可点击的同时更轻松地将文本垂直居中？

另外，如果有人知道，我正在思考为什么 menu2 标签不可点击。

Answer 1

你需要将anchor设为父div的宽高，我也推荐box-sizing这个元素

.menu1 a {
    display: block;
    position: absolute;
    color: white;
    text-decoration: none;
    width: 100%; height: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
    top: 0; left: 0;
}

.menu2 a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    width: 100%; height: 100%; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

}

http://jsfiddle.net/sjZe4/1/

Answer 2

<a><div></div></a>

Answer 3

只需增加menu2 的高度和宽度，并在顶部添加一些内边距。

演示：http://jsfiddle.net/snk42/4/embedded/result