CODEWITHSUNDEEP
htmlcss
Calgar99
Calgar99

Reputation: 1688

a:hover change background of list item

I am trying to get a:hover to change the background of a list item.

The approach I'm currently using only changes the immediate background color behind the text, not the entire space (padding:15px 55px 15px 55px;) assigned for that list item.

How do I go about changing the a:hover attributes to change the background color utilizing the full space assigned to that list item?

CSS :

 #navbar{
        background:#303030;
    }

#navbar li{
    display:inline-block;
    list-style:none;
    padding:15px 55px 15px 55px;
    font-weight:normal;
    font-family: 'Lora', serif;

}
#navbar a{
color:#F5F5F5;
}

#navbar a:hover{
background-color:#EE7621;
}

Upvotes: 2

Views: 3766

Answers (1)

Patsy Issa
Patsy Issa

Reputation: 11293

Why not set your hover on the li:

#navbar li:hover{
background-color:#EE7621;
}

Edit:

As suggested by thirtydot:

"Ideally, your a element should take the entire space of your li element. Try adding display:inline-block; or display:block to the a and move the padding from the li to the a"

Upvotes: 14

Related Questions