CSS样式<a>标签背景、<div>标签、伪类选择器的问题

怎么实现如下的效果：
当鼠标放在登录按钮上时，整个登录按钮全部变红？
我的代码只能完成如下效果：
a标签和黑色的div标签始终有个间距，在a标签中定义margin 0px也不管用。
但是取消div中设置的行间距 line-height: 40px; 就可以实现了，但是这样整个黑色div又太矮了，求助如何实现第一张图的效果。

<!--    HTML顶部登录标签-->
    <div class="top">
        <a href="#">登录</a>&nbsp;&nbsp;&nbsp;
        <a href="#">注册</a>&nbsp;&nbsp;&nbsp;
        <a href="#">更多</a>&nbsp;&nbsp;
    </div>

<!-- CSS代码  -->
.top{
    background: black;
    text-align: right;
    vertical-align: 50%;
    line-height: 40px;
    font-size: 20px;
.top a{
    color: white;
    border: 1px solid;
    text-decoration: none;  /*去除下划线*/
    color: black;
a:hover{
    background-color: red;
}