Question

I’m using a ul navigation for my own personal site, but I can’t for the life of me figure out how to change the background-color of the whole li element. If you look at this fiddle, you can see what I’m trying to accomplish. I’ve looked everywhere, but I haven’t found a solution to “highlight” the area to the left of the text. Additionally, I am not sure how to account for the margin: 2px. Here is some relevant CSS:

#nav li {
    margin:2px;
}

#nav li:hover {
    margin:2px; <-- does not affect where the background color changes, it seems
    background-color:#b5aec8;
}

Is there a way to change the entire nav background using pure CSS? If so, how? Any suggestions are appreciated!

Answer 1

From your fiddle, simply remove the padding from the <ul> element and give it to the <li> elements, which will then be colored fully.

#nav {
    width:80px;
    -moz-box-shadow: 0px 3px 5px #888;
    -webkit-box-shadow: 0px 3px 5px #888;
    box-shadow: 0px 3px 5px #888;
    position: fixed;
    left:0;
    padding-left: 0px; /* ******* Changed to 0 */
    top:0;
    margin-top:25%;
    list-style: none;
    background-color: #ccc;
    color:black;
    font-family:Helvetica;
    z-index: 1;

}

#nav ul {
    list-style: none;
    padding-left:0px;
}

#nav a {               
    text-decoration:none;
    color:black;
}

#nav li {
    margin:2px;
    padding-left: 10px; /* ******* Returned to this element here */
}

#nav li:hover {
    margin:2px;
    background-color:#b5aec8;
}

See The Example Here.