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}

Comfortably Numb · Accepted Answer · 2014-04-24 17:26:35Z

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/

answered Apr 24, 2014 at 17:26

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin · Accepted Answer · 2014-04-24 17:37:12Z

0

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.

edited Apr 24, 2014 at 17:37

answered Apr 24, 2014 at 17:30

Justin

1,33911 silver badges24 bronze badges

Comments

IglooWhite · Accepted Answer · 2014-04-24 17:31:48Z

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.

Mayank Tripathi · Accepted Answer · 2014-04-24 17:34:32Z

0

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

answered Apr 24, 2014 at 17:34

Mayank Tripathi

1,3621 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

CSS Menu issue on hover

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related