Andy11548 Posted December 7, 2011 Share Posted December 7, 2011 Hello, I'm trying to make it so that when I hover over the Main Tab on a drop down menu it changes color, and while you're going through the other options on the drop down, the main tab still stays coloured. Thats probably the best way I can explain it. If you can help me, it would be greatly appriciated. Thanks, Andy. Quote Link to comment Share on other sites More sharing options...
scootstah Posted December 8, 2011 Share Posted December 8, 2011 Well I don't know the markup for your drop down menu, but just adding a :hover pseudo-class to the container should work. Typically, it would be something like: ul li:hover { background:red; } Quote Link to comment Share on other sites More sharing options...
Andy11548 Posted December 8, 2011 Author Share Posted December 8, 2011 I know that. I have the hover working, however, when I hover over the main tab and go through the subtabs, I want the main one to stay as if its hovered over. Example: - Community - Link Here - Link Here - Link Here If I hover over Community, the background turns black. If I move onto the "Link Here", It goes back to normal, whereas I want the "Community" part to always stay black until they've either clicked one of the links or gone off it. Quote Link to comment Share on other sites More sharing options...
scootstah Posted December 8, 2011 Share Posted December 8, 2011 Like I said, without showing me the markup for your dropdown then I really can't help you any further. Maybe this example will help you: http://jsfiddle.net/uKpUC/ Quote Link to comment Share on other sites More sharing options...
Frank P Posted December 10, 2011 Share Posted December 10, 2011 I'm trying to make it so that when I hover over the Main Tab on a drop down menu it changes color, and while you're going through the other options on the drop down, the main tab still stays coloured. If you can work with two background colors, you can do it this way: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> li ul { display: none; } li:hover ul { display: block; } li:hover { background: yellow; } li:hover ul { background: white; } </style> </head> <body> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a> <ul> <li><a href="#">Link 2-1</a></li> <li><a href="#">Link 2-2</a></li> <li><a href="#">Link 2-3</a></li> </ul> </li> <li><a href="#">Link 3</a></li> </ul> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.