CODEWITHSUNDEEP
htmlcss
AmanS
AmanS

Reputation: 1510

list background not changing in CSS in hover

hover on first element of list changes the whole background to some other colour. but hover other element except first changes background also but some portion of background is left unchanged there as you can see in picture.

enter image description here

HTML:

<div id="add_friend">
    <ul id="frnd_bar_2">
        <li>Add To Friends</li>
        <li>About</li>
        <li>Photos</li>
        <li>Friends</li>        
    </ul>
</div>

CSS:

#frnd_bar_2{
      position:relative;
      list-style: none;
      text-decoration: none;
      display: inline-block;
      border: 1px solid grey;
      border-left: 2px solid grey;
      margin: 0px;
      padding: 0px;
}
#frnd_bar_2 li{
     cursor:pointer;
     list-style: none;
     text-decoration: none;
     display: inline-block;
     border-right: 2px solid grey;
     text-align:center;
     margin: 0px auto;
     padding: 5px;
     padding-left: 30px;
     padding-right: 30px;
     font: 20px sans-serif ;
}
#frnd_bar_2 li:hover {
     background: #aaa;
     margin: 0px auto;
}
#add_friend{
    float:left;
    height:auto;
    background:#efefef;
    margin: 0px;
    padding: 0px;
}

is there any problem in the code?

Upvotes: 1

Views: 79

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

I'm highlighting the key problem:

You should use display: inline-block to your #frnd_bar_2 li bu not to #frnd_bar_2

see this demo other things you can change as per your needs

Okay just use display: table-cell; in your #frnd_bar_2 li and remove display from #frnd_bar_2 demo updated

Upvotes: 1

Oleg Pyzhcov
Oleg Pyzhcov

Reputation: 7353

This seem to be because of whitespace in HTML code. Either add font-size: 0 to #frnd_bar_2 or put all li's into one line.

Upvotes: 1

Related Questions