Can't apply background on menu container - html

Question

I have container with width of 100% and inside of it i have a menu. When i want to apply background color to menu container nothing happens, its killing me i cant figure it out.
It works when i apply display inline-block on it but why would i need to display it differently its only a container 100% width
menu {
width: 100%;
background: #333;
}
.menu > ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.menu > ul > li {
float: left;
background: #e9e9e9;
display: inline-block;
padding: 0;
margin: 0;
}
.menu > ul > li > a {
text-decoration: none;
padding: 1.5em 3em;
display: inline-block;
outline: 0 none;
}
.menu > ul > li > ul {
display: none;
background: #333;
padding: 20px 30px;
position: absolute;
width: 100%;
z-index: 99;
left: 0;
color: #fff;
margin: 0;
}
.menu > ul > li:hover > ul {
display: block;
}
and this is my html
<div class="menu">
<ul>
<li>Home
<ul>
This is also mega menu
</ul>
</li>
<li>Who are we?
<ul>
This is mega menu
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
also when i try to float my UL to right nothing happens. Did i mess up my display: in any element ?

Answer 1

That's because your LI elements are floated. In this case, container will have a height of 0 pixels. You need to clear the container (.menu) first. There's also a slight error on the MENU element - you forgot to add the DOT .menu (to be a class, as in your html code).
To clear floats, read this > https://css-tricks.com/the-how-and-why-of-clearing-floats/
.menu:before,
.menu:after {
content: "";
display: table;
}
.menu:after {
clear: both;
}
A working scenario, on jsfiddle, here > jsfiddle.net/4pgvzxs0/