如何保持链接的背景与div背景的高度相同？

Question

这就是我要做的事情。我目前在网页顶部有一个垂直菜单。我使用这个CSS代码构建它。

#main ul {
    text-align:center;
    padding:0;
    margin:0;
    list-style:none;
}
#main li {
    display:inline;
    vertical-align:middle;
    line-height:50px;
}
#main a:link {
    text-decoration:none;
    color:black;
    transition:0.5s;
    padding:30px;
}
#main a:hover {
    text-decoration:underline;
    color:gray;
    background-color:white;
    padding:50px;
}

不好的是，当我进入悬停时，我希望背景也会在我已经使用div设置的背景之上进行更改。我似乎无法将它与我的div保持在相同的高度，同时保持宽度在它所在的位置。我的代码究竟与我的代码有什么关系？提前谢谢。

Answer 1

添加此CSS规则以使a元素填充其父元素：

#main a { 
  display: block;
  with: 100%;
}