I have created a list where some of the list items are links and the others are not. When you hover over the list items that are links, the background changes colour to indicate it is a link.

 

I have added some padding-left to each list item to move it away from the edge, but now the hover effect does not cover the whole list item. It starts where the padding-left ends. I want the background colour to cover the whole list item.

 

I tried display: block, but this did not work.

 

Also my list is nested and I want the hover effect to cascade through.

 

You can view what I have done so far here.

 

Any help would be appricated.

 

Thanks.

Add the padding-left to the anchor not to the list item.

 

Note - you have some unecessary attributes in your code for example a block element, or an elment that is set to display block does not need a width of 100%, this is the default for a block

Edited August 19, 201511 yr by rbrtsmith

Thanks for your reply. I have made the changes that you have suggested.

 

What I want to happen is for all list items to have the padding-left. What has happened now is that only the items with links have the padding.

 

When you click on a link that has another link inside, I want it to appear indented. This is how it worked before. I just could not get the hover background colour to appear across the full width of the element.

 

You can view the new changes here.

 

I hope I have made sense.

 

Thanks.

then you can add padding to all the list items

then all the links have negative margin equal to that padding and padding themselves equal to the original padding.

 

This gets a lot more sensible if you are using a CSS preprocessor and can store the padding value in a variable.

Thanks again for your help.

 

I have tried your suggestion and it does not seem to work. I think I have done something wrong.

 

I have included the code I have used.

ul {
    list-style: none;
    padding: 0;
    .inner {
        
        overflow: hidden;
        display: none;
        li {
            padding-left: 1em;
            border-bottom: 1px solid #ccc;
            &:last-child {border-bottom: none;}
            
        }
        &.show {
          /*display: block;*/
        }
    }
    li {
        a.toggle {
            ;
            padding-left: 1em;
            display: block;
            background: #fff;
            color: #333;
            border-radius: 0.15em;
            transition: background .3s ease;
            &:hover {
                background: #ededed;
            }
        }
    }
}

The link to what it looks like now is here.

 

As you can see the hover background colour is now outside the list on the first item. Also the hover background colour does not cover the whole of the list item in the nested links.

 

Thanks for your time.

You only seem to get targeting anchors with a class of toggle - btw there's no need to prepend the a on a.toggle, just use toggle.

 

All the anchors in your accordion need -ve left margin and +ve left padding. Add the value to a variable as I see you are using Sass

Thanks for being patient with me.

 

I have amended my code to look like this:

ul {
    list-style: none;
    padding: 0;
    .inner {
        
        overflow: hidden;
        display: none;
        li {
            padding-left: $left-distance;
            border-bottom: 1px solid #ccc;
            &:last-child {border-bottom: none;}
            
        }
        &.show {
          /*display: block;*/
        }
    }
    li {
        .toggle {
            margin-left: -$left-distance;
            padding-left: $left-distance;
            display: block;
            background: #fff;
            color: #333;
            border-radius: 0.15em;
            transition: background .3s ease;
            &:hover {
                background: #ededed;
            }
        }
    }
}

I created a variable called $left-distance which holds the value 1em.

 

As you can see here it is still the same. I'm not sure if I have done what you suggested correctly.

As far as i can see it now works as you intended.

Once again, thanks for your reply. The only issue that I have is if you click on the Test 5 link, the hover background colour does not cover the whole of the list item. There is a gap between the edge of the list item and the container.

 

I am very grateful for your help. Thank you.

thats because you have nested lists so the padding increases by a factor of 1 each level you nest, so for links nested 2 levels deep you need -ve margin that is double the original value and padding left to match.

Thank you for your time. You have been a great help.