Solved

CSS Drop-Down Menu Colour Change

Posted on 2011-02-17
6
243 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 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change how page is organized 3 51
Make page layout not change with page 1 33
Text color in a select 11 32
In wordpress, how did they do that? 3 14
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

734 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