2

I'm having some trouble with a rollover.. hoping you can help me!

I'm using li navigation, and I want to have separate boxes linking to different pages. This part is fine and works like it should. I want to be able to hover over the box and have the box AND the link change colour. I can get the box changing no problem, and the link changes when you hover over it, but is there a way for them to both change when you're just hovering over the box? Here's what I've got so far:

#nav-menu ul{float: right; text-align: center;}

#nav-menu li{margin-right: 5px; list-style:none; padding-left: 1px; text-align: center; font-size: 14px;float:left; padding:0px 15px; width: 57px; position:relative;z-index:200; background: #000; color: #FFFFFF; font-family: georgia;}

#nav-menu li a{display: block; float: left; color:#fdf2e7;font-size:14px;text-decoration:none; text-align: center; padding:5px 0px 5px 0px; font-family: georgia;}

#nav-menu a:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}

#nav-menu:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}

--

Any help would be greatly appreciated. Thanks! :)

trutheality
  • 23,114
  • 6
  • 54
  • 68
rossautomatica
  • 459
  • 4
  • 9
  • 25

1 Answers1

5

Use li:hover to target a list item when you hover over it, and use li:hover a to target an anchor whose parent list item is being hovered over.

Alex
  • 9,313
  • 1
  • 39
  • 44
  • Thank you, Alex! You solved the problem which had been bugging me for hours! – rossautomatica Sep 20 '11 at 22:02
  • 1
    [Here](http://jsfiddle.net/mYa3k/). Notice the anchor style changes when the `li` is hovered over, because I changed `#nav-menu a:hover` to `#nav-menu li:hover a`. – Alex Sep 20 '11 at 22:03
  • 1
    Not sure what browsers you need to support, but be aware that IE6 only supports :hover on links. – steveax Sep 20 '11 at 22:12