• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 426
  • Last Modified:

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

TEST PAGE:

http://www.kimsbasketcreations.com/index2.asp

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?

HTML:

<ul class="nav">
	<li><a href="http://www.kimsbasketcreations.com/index2.asp">Home</a></li>
</ul>

Open in new window


CSS:

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

Open in new window


Thank you!
0
bbdesign
Asked:
bbdesign
  • 2
1 Solution
 
Chris StanyonCommented:
You could always change the background when the LI is hovered, instead of the A

ul.nav>li:hover, {background-color:#ff8bcf;color:#6b1e42;}
0
 
bbdesignAuthor Commented:
Awesome, thanks!
0
 
Chris StanyonCommented:
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.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now