webmaster Posted June 9, 2009 Share Posted June 9, 2009 I was trying to create a vertical css navigation menu using a list. I wanted it so that when you hovered over the link the whole background would change. I can't get the entire list row to highlight: . How can I make the whole row highlight (like the top row)? This is the code I have: #nav li { margin: 0px; list-style-type: none; border-top-style: solid; border-top-width: thin;}#nav ul { margin: 0px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; padding: 0px;}#nav a:hover { background-color: #C2AC77;}#nav a { margin: 0px; padding: 5px;} Link to comment Share on other sites More sharing options...
smerny Posted June 9, 2009 Share Posted June 9, 2009 try adding "display:block" Link to comment Share on other sites More sharing options...
smerny Posted June 9, 2009 Share Posted June 9, 2009 and i mean to the "#nav a" Link to comment Share on other sites More sharing options...
webmaster Posted June 9, 2009 Author Share Posted June 9, 2009 That worked! Thanks. But why does that make a difference? Link to comment Share on other sites More sharing options...
smerny Posted June 9, 2009 Share Posted June 9, 2009 block-level elements group things as blocks so there is a bigger area... lists are automatically block-level elements so adding display:block to the link makes them match up Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.