[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 253
  • Last Modified:

CSS Drop-Down Menu Colour Change

Hi All,

I've been trying to figure out how to change the text color of my main li to white while keeping the background color for that main/top li active once a user hovers over it but the menu that appears below it would have a different background color and different text color, so right now I'm stuck at changing the colour of the text for the top level li.

See the code for a working example.
test.css
test.html
0
VAN_AL
Asked:
VAN_AL
  • 3
  • 3
3 Solutions
 
jtwcsCommented:
Are you trying to make the main menu <li>'s white when you hover over them?  If yes, you can change the li:hover declaration to

#nav li:hover > a {background-color:#333; color: #FFF; font-weight: normal;}

Hope this helps.
0
 
VAN_ALAuthor Commented:
Thank you that did it, but I don't know why in Safari (Mac) the main menu li is missing a padding on the right side? The background colour on the main menu li when you hover over it, there is about 2px space between the text and the background color on the left but it's lost on the right?
0
 
VAN_ALAuthor Commented:
Ok basically when I used both of these snippets, the padding on the right appears fine in safari and firefox but now I get a background color when I hover over the items within the menu in the drop-down, i just want to hight the text within the drop-down menu while keeping the background color for the main menu li highlighted.. i hope this makes sense.

#nav li:hover {background-color:#333; color: #FFF; font-weight: normal;}
#nav li:hover > a {background-color:#333; color: #FFF; font-weight: normal;}

0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
jtwcsCommented:
I made some other changes to the li and li a declarations.  This should fix the problem.

#nav li { display: inline; list-style: none; position: relative; margin: 0; }

#nav li a { color: #000; display: block; margin: 0px; padding: 5px 10px 2px 10px; text-decoration: none; }
#nav li a:hover { background-color:#333; color: #FFF; font-weight: normal; }
#nav li:hover > a { background-color:#333; color: #FFF; font-weight: normal; }

 preview
0
 
jtwcsCommented:
Include this change as well.

#nav li li a:hover {
      background: #FFF;
      color: #FF9900;
      z-index: 9996;
}
0
 
VAN_ALAuthor Commented:
Thanks, that did it, works for all browsers but strangely enugh in Firefox 3+ Mac and WinXP 3+ when you hover over the edge of the text links in the drop-down it will show a background color, if you hover over the text normaly it's not noitciable but if you curise around the menu slows it will appear and only in firefox, strange enugh seeing how it's always IE that i have my battles with.
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

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