CSS Menu issue on hover

Question

I have a menu with four items and each one of them has a different colors.

My challenge is to darken each item on hover and I know I can use opacity to achieve this but before that, every time I hover on one of items it only highlights part of it and skips the padding. I know it is a stupid question to ask but this is my first front end job since 1999 :)

Could you please help me with understanding what is wrong here? thank you all.

this is the menu structure

  <div class="menu-bar-inner">
  <ul class="menu-bar-menu">
  <li class="color1"><a href="">Item 1</a></li>
  <li class="color2"><a href="">Item 2</a></li>
  <li class="color3"><a href="">Item 3</a></li>
  <li class="color4"><a href="">Item 4</a></li>
  </ul>

and this is my CSS

 .menu-bar-menu li, .menu-bar-menu li a {

list-style: none;
float: left;
padding: 6px 20px 7px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}


.menu-bar-menu li a:hover {   
background-color: black;
}



.color1 {background-color: #ce5043}
.color2 {background-color: #fb8521}
.color3 {background-color: #444444}
.color4 {background-color: #b3c833}

Answer 1

I'd take the padding off the li elements and put it on the a elements instead. Also, set a to display: block;, so it occupies the entire height and width of its parent li. Like so:

.menu-bar-menu li, .menu-bar-menu li a {
        list-style: none;
        float: left;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        background-color: #ce5043
    }

    .menu-bar-menu li a {
        display: block;
        padding: 10px 20px;
    }

Here's a fiddle: http://jsfiddle.net/82uyt/

Also, you were missing the closing </div> tag.

Answer 2

You can use this for hovering:

.menu-bar-menu li:hover, .menu-bar-menu li:hover a {   
    background-color: black;
}

it take care of both li element and its child anchor when li is hovered

Demo :http://jsfiddle.net/DajQ9/1/

Answer 3

While there are many ways to fix this, the root of your issue is the fact that you're padding both the container AND the link inside it when you style the li and the li a in one shot. What you're left with is an a tag that has padding inside an li that has padding, and the padding of the li tag is the unchanging color. By adding:

.menu-bar-menu li{
     padding:0;
     margin:0;
}

AFTER the declaration you have, you can fix this, or simply separate out your declarations to make it a bit more obvious. Also, when in doubt, a tool like the Firebug extension for Firefox will be your best friend. You can launch it, then click an item in your page to see the styles that are affecting that exact piece... sometimes just the highlighting/border while you move around is enough to make you see what's happening.

Answer 4

Yoy need to apply padding to the element on which you are applying the hover action. Here is your code updated. Visit this link: http://jsfiddle.net/dnPmE/1/

css:

.menu-bar-menu li, .menu-bar-menu li a {
    list-style: none;
    float: left;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
}
.menu-bar-menu li a{
padding: 12px 40px 14px 40px;    
}
.menu-bar-menu li a:hover {
    background-color: black;
}
.color1 {
    background: #ce5043;
}
.color2 {
    background: #fb8521;
}
.color3 {
    background: #444444;
}
.color4 {
    background: #b3c833;
}