Solved

CSS Drop-Down Menu Colour Change

Posted on 2011-02-17
6
236 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

760 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now