无法更改导航栏的背景颜色

Question

I can't change the colour of the background that my navigation bar has. I'm not using any framework so there's no conflicts. Here's the code that I have tried:

 .navigation-right { float: right; } .navigation-left { float: left; } .navigation-main { background-color: #000; width: 100%; } .navigation-main li { display: inline-block; padding: 10px; } .navigation-main a { color: #F2F2F2; text-decoration: none; } 

 <div class="container"> <section class="navigation"> <nav class="navigation-main"> <ul> <div class="navigation-right"> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> </div> <div class="navigation-left"> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> </div> </ul> </nav> </section> 

Answer 1

You are missing an overflow:hidden in the parent of the floating elements. Without it, the browser can't calculate the height hence the background colour not coming through. Try adding this line to your CSS:

.navigation-main{
    background-color: #000;
    width: 100%;
    overflow: hidden; // Add this
}

Answer 2

You have to clear your floats . Using overflow is a sneaky, though not always preferable way. The best way - in my opinion - is using a pseudo element, like so:

 /* Clear */ ul::after { content: ""; display: table; clear: both; } .navigation-right { float: right; } .navigation-left { float: left; } .navigation-main { background-color: #000; width: 100%; } .navigation-main li { display: inline-block; padding: 10px; } .navigation-main a { color: #F2F2F2; text-decoration: none; } 

 <div class="container"> <section class="navigation"> <nav class="navigation-main"> <ul> <div class="navigation-right"> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> </div> <div class="navigation-left"> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> <li><a href="">Menu</a> </li> </div> </ul> </nav> </section> 

Note though, that you oughtn't split up your menu like that, with divs inside a list. Instead, create two seperate lists.

Answer 3

Just corrected your HTML and add overflow:hidden to you're .navigation-main{...} JsFiddle There

Teknotica had it aswell :)