html - 当我将鼠标悬停在导航栏中时，如何填充文本背后的背景？ [HTML/CSS]

Question

我现在有一个导航栏，它完全按预期工作，除了一件小事:当我将鼠标悬停在它上面时，不透明度变化不会一直向下延伸到底部。这是几个屏幕截图:这个:http://imgur.com/QgEFWMK显示未选中的样子这个:http://imgur.com/H4fksil显示当我的光标在顶部时的样子

如您所见，底部的轻微空白看起来很难看，我不知道如何补救。我的 HTML/CSS 如下:

HTML:

<div class="navbar center affix" role="navigation">
    <ul>
        <li><a href=# itemprop="url"><span itemprop="titlenav">Home</span></a></li></ul></div>

CSS:

 .navbar {
    background-color:#747A80;
    width:100%;
    height:auto;
    box-shadow: 0px 1px 10px #5E5E5E;
    top:0px;
    border-bottom:solid #000000;
}

.navbar li {
    display:inline-block;
    text-align: center;
    color: #FFFFFF;
}

.navbar li a{
    display: block;
    padding:15px;
    margin-bottom:-10px;
    line-height:20px;
    color:#F9F9F9;
}

.navbar li:hover {
    opacity:1;
    background:#575A5C
}

任何帮助将不胜感激!谢谢!

Answer 1

Demo

要删除浏览器默认添加的边距，请添加以下代码:

.navbar > ul {
    margin: 0;
}

并删除这个:

.navbar li a{
    margin-bottom:-10px;
}