CODEWITHSUNDEEP
htmlcssdrop-down-menumenu
riogrande
riogrande

Reputation: 349

Can't apply background on menu container

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

also when i try to float my UL to right nothing happens. Did i mess up my display: in any element ?

Upvotes: 0

Views: 43

Answers (1)

designarti
designarti

Reputation: 629

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/

Upvotes: 2

Related Questions