I'm having trouble with setting a background color on a menu container that is inside a container with a width of 100%. I tried applying the background color directly to the menu container, but it didn't work. I managed to get it working by changing the display property to inline-block, but I don't understand why I need to do that when it's just a container with 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;
}
This is how my HTML looks like:
<div class="menu">
<ul>
<li><a href="#">Home</a>
<ul>
This is also mega menu
</ul>
</li>
<li><a href="#">Who are we?</a>
<ul>
This is mega menu
</ul>
</li>
<li><a href="#">Services</li></a>
<li><a href="#">Contact</li></a>
</ul>
</div>
Additionally, when I try to float my UL to the right nothing happens. Have I messed up the display property in any element?