导航栏中的backgroundcolor在下拉菜单中保持可见

Question

当我将鼠标悬停在我的导航栏上某个位置的菜单下拉菜单时，该菜单有自己的背景颜色。在下拉菜单的底部总是有一个来自导航栏背景的部分可见，我怎么能摆脱这个？另外，我如何才能使导航栏的颜色占据屏幕的整个大小？

/*Navigation bar*/
.wrap{
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
}
.navbar{
    margin: 0;
    padding: 0;
    overflow: auto;
    width: 100%;
}
.navbar li{
    display: inline-block;
    position: relative;
    width: 120px;
    padding: 10px 0px;
    float: left;
    color: white;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    background-color: #101010;
}
.navbar li a{
    text-decoration: none;
    color: white;
}
.navbar li ul{
   padding-top: 10px;
}
.drop-content li:hover{
    transition-property: background-color;
    transition-delay: 0.1s;
    transition-duration: 1s;
    background-color: #e60000;
    height: auto;
}
.drop-content li{
    text-align: left;
    background-color: #003566;
    color: white;
    padding: 10px;
    margin: 0;
    box-shadow: 0px 1px 0px 1px hsl(0, 0%, 15%);
}
/* dropdown menu */
.drop-content{
    margin: 0;
    padding: 0;
    position: relative;
    display: none;
    text-align: left;
}
.navbar li:hover .drop-content{
    display: block;
}

 <div class="wrap">
            <ul class="navbar">
                <li><a href="#">Home</a></li>
                <li>Link 1
                    <ul class="drop-content">
                        <li>Link 1</li>
                        <li>Link 2</li>
                        <li>Link 3</li>
                        <li>Link 4</li>
                    </ul>
                </li>
                <li>Link 2
                    <ul class="drop-content">
                        <li>Link 1</li>
                        <li>Link 2</li>
                        <li>Link 3</li>
                        <li>Link 4</li>
                    </ul>
                </li>
                <li>Link 3
                    <ul class="drop-content">
                        <li>Link 1</li>
                        <li>Link 2</li>
                        <li>Link 3</li>
                        <li>Link 4</li>
                    </ul>
                </li>
                <li>Link 4</li>
                <li>Link 5</li>
                <li>Link 6</li>
                <li><a href="#">Link 7</a></li>
                <li><a href="#">Link 8</a></li>
            </ul>
        </div>

你能告诉我怎样才能让它变得更简单一点吗？因为我认为我习惯了许多css

Answer 1

设置'navbar'的高度及其背景，而不是li。

 .navbar {
        margin: 0;
        padding: 0;
        background-color: #101010;
        display: inline-block;
        height: 45px;
    }

从li中删除背景。你已经完成了。

.navbar li {
    display: inline-block;
    position: relative;
    width: 120px;
    padding: 10px 0px;
    float: left;
    color: white;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}