Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS Drop-Down Menu Colour Change

Posted on 2011-02-17
6
Medium Priority
?
247 Views
Last Modified: 2012-05-11
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
Comment
Question by:VAN_AL
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 10

Accepted Solution

by:
jtwcs earned 2000 total points
ID: 34923795
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
 
LVL 1

Author Comment

by:VAN_AL
ID: 34923888
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
 
LVL 1

Author Comment

by:VAN_AL
ID: 34923910
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 2000 total points
ID: 34926530
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
 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 2000 total points
ID: 34926711
Include this change as well.

#nav li li a:hover {
      background: #FFF;
      color: #FF9900;
      z-index: 9996;
}
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34928823
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question