导航栏上的backgroundcolor下拉时仍保持可见

Question

when i hover over my navbar at some places a menu dropdown, that menu has his own background color. at the bottom of the dropdown menu there is always a part from the navbar background visible, how can i get rid of this? also how can i make the color of the navbar take in the whole size of the screen?

 /*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> 

can you also tell me how i can make it little bit more simpler? cause i think i used to many css on it

Answer 1

Set a height of 'navbar' and the background on it, not on li.

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

Remove the background from li. You're done.

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