Solved

CSS Drop-Down Menu Colour Change

Posted on 2011-02-17
6
240 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
  • 3
  • 3
6 Comments
 
LVL 10

Accepted Solution

by:
jtwcs earned 500 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 500 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 500 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 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