Retain text color on hover out

HTML & CSS
1

Hello

I have a dropdown menu with hover effect. Work-in-progress is here: studioalice.se/pep/menu.html

But I have run into a problem. The top line links are blue, and on hover there is a blue background and the text turns black. Also are the child list tags shown, with the same background.

When moving away from the topmenu link the text reverts back to blue.

Is there a way to keep the text black even when moving down the child menu?

Regards, Magnus

2

Magnus,

In order to accomplish this you’ll need to use a bit of javascript to change the class of the top menu item. I remember having this issue a few months ago and that’s the path I went.

That being said, there’s some great scripts out there like suckerfish from A List Apart that you may want to check out. This script solves this problem for you and ensures that it’s cross browser compatible. If you’re trying to write your own version then I congratulate you on your patience but just be sure to test it against all versions of the most popular browsers. I guarantee you’ll find bugs. (:

Jeff

3

Perhaps this could prove useful? :slight_smile:

4

I knew Ryan would step in here. Magnus, listen to what he says… he’s pretty much a genius.

5

Thanks for the tips :slight_smile:

I tried both Suckerfish and the thread Ryan suggested. But, I could not get my head around all childs, sibblings and nested selectors :confused:

(Why aren’t there no “mother” selector :slight_smile: )

So, I took the highway and changed #nav a to black. I will leave it so for the moment – and here what the designer thinks :rolleyes:

– Magnus

6

Hi again

I have a follow up question on the menu (in-progress here: studioalice.se/pep/ )

Option 1: How to set a “auto” width on the submenu? I like to have one-line links in the submenu (hover over “Välj process”). And, is it possible to have a min-width (to avoid errors like in “Kundcase”)?

Or

Option 2: I can set the width on the submenu. And if so, is it doable to have less space between the lines in the link (li tags) then between each link?

– magnus

7

Hi,

You can do a fluid width submenu depending on the content but it’s a little complicated.

Regarding your original question the top level anchor can have a different colour to the rollover colours on the drop down links and stay highlighted quite easily. You just style the first level with what you want and then change it for the nested level.

e.g.
li:hover a {color:red}/* top row*/
li:hover li a{color:blue}/* normal sub links because they would be affected by the above rule*/
li:hover li:hover a{color:green}/* hovered sub links */

and so on… (the above is pseudo code and would need to be adjusted for your example).

to have less space between the lines

Same as above just target the nested links with the different styles you need.


#nav li a {
    text-align: center;
    text-decoration: none;
    line-height: 2.5em;
    color: black;
}
[B]#nav li li a {line-height:1.5em}[/B]

The nested elements can always be uniquely targeted -you just have to cancel out what was set on the parent.

It can be a little confusing but it’s just basic css and keeping track of what’s already been set.:slight_smile:

8

Great Paul :slight_smile:

I will try your suggestion. Many thanks.

– Magnus