Hover state changes background color, not going to edges of <li> element

Posted on 2012-09-19
Last Modified: 2012-09-19

The hover state is only coloring the background of the linked text, which is correct based on my code. Is there a way via only CSS to color the entire background of my <li> elements? I.e., to the edges of the borders?


<ul class="nav">
	<li><a href="">Home</a></li>

Open in new window


ul.nav>li a:hover{background-color:#ff8bcf;color:#6b1e42;text-decoration:none;}

Open in new window

Thank you!
Question by:bbdesign
    LVL 42

    Accepted Solution

    You could always change the background when the LI is hovered, instead of the A

    ul.nav>li:hover, {background-color:#ff8bcf;color:#6b1e42;}

    Author Comment

    Awesome, thanks!
    LVL 42

    Expert Comment

    by:Chris Stanyon
    Just as a heads up, you might want to move the padding from the LI to the A, otherwise your button will light up even if you're not hovered over the A.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    CSS for Safari only 5 36
    Video works in everything but Safari 11 25
    Problem to Popup 37 65
    Footer Widget in italics on one page only 2 15
    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now