CODEWITHSUNDEEP
htmlcss
Inna
Inna

Reputation: 433

hover give whole li a background color

Im trying to give a li a background-color, everything i tried it didn't give the whole li the color it just give it from where the text starts.

How do i make it give a background-color to the whole li

JSFiddle

http://jsfiddle.net/r2wL2pqj/

CODE

HTML

                <ul class="items-list">
                    <li class="nickname-list">
                        <span class="nickname">The Nickname</span>
                    </li>
                    <li class="home-list">
                        <span class="home">Home</span>
                    </li>
                    <li class="search-list">
                        <span class="search-friend">Search friends</span>
                    </li>
                </ul>

STYLE

ul.items-list li:hover {
    background-color: rgba(58, 87, 149, 0.66);
    cursor: pointer;

    border-radius: 5px;
}
.items{
    float:right;
}
ul.items-list {
    display: -webkit-box;
    list-style-type: none;
}
.items-list li {
    margin-left: 10px;
    text-align: center;
}
.items-list li:after {
    color: #385490;
    content: "|";   
    margin-left: 10px;
}
.nickname, .home,.search-friend {
    color: #000;
    font-weight: bold;
    font-size: 12px;
    line-height: 10px;
}

Also is this the right way for doing this, am I on the right track ?

Upvotes: 0

Views: 63

Answers (2)

Stickers
Stickers

Reputation: 78676

Remove the margin, use padding instead:

.items-list li {
    padding-left: 10px;
}

Upvotes: 2

Angry 84
Angry 84

Reputation: 2995

I get a full background, the gap between is your margin, try changing your margin to a padding if you want the whole gap between the pipes to change.

.items-list li {
    padding-left: 10px;
    text-align: center;
}

http://jsfiddle.net/r2wL2pqj/1/

Upvotes: 1

Related Questions