How do I use li:hover to change the WHOLE li color?


Tags: css,navigation,hover,html-lists

Problem :

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!



Solution :

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.


    CSS Howto..

    how to get these two div's side by side in this container

    How to CSS sandbox/reset an entire DIV area in the current page?

    How can I make a scrolling DIVs background transparent?

    How to add offset border to image of unknown size?

    How to make margin collapsing work with input type=button/submit?

    How to make a thicker text shadow using css?

    How to fix bottom of layout of 100% height (jQuery Mobile and Google Map)?

    how to make a space-keeping column use css and table tag

    How to use global stylesheet with css loader

    UI Challenge - how to draw “connectors” between elements?

    How To Prevent Transition Animation To Run Page Load

    How to select not first tr and not last td

    How to identify device to make separate css for iPad and Galaxy Tab?

    how to place one div on top of another, when both are centered using auto margin?

    how to target individual elements in grails g:render

    How do I create a margins on Google maps? [closed]

    How to add CSS stylesheet to aspx.vb table

    How to animate top % after a delay?

    how to put img inside circle in html and css?

    How to apply different css margin-top to each children in a list

    How to activate a CSS3 (webkit) animation using javascript?

    How to make an image follows scrolling until a certain point

    How to control tr height of table in CSS

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    How to Align text with respect to image css

    How to prevent css borders from floating to the top of parent div

    How to make image clipping in css

    How to use media queries in css

    CSS `will-change` - how to use it, how it works

    CSS: How to center element that is bigger then the container?