Text disappears with CSSMenu on rollover

[skypanther]

I'm having troubles with the DHTML menus in the CSSMenu Horiz 1 col layout. Check out http://arborrealsolutions.com/index.php -- point at the Regulatory Information menu, then roll down to one of the submenu items....the Regulatory Info text disappears. (Well, it's color stays at the tan rather than changing to green like I'd like.) It's actually a bit worse in IE: if you point at a menu box, but not at its text, the text disappears.

I need to set the text color in the top menu boxes when the boxes are "active" but I can't figure out which style controls this. I've set a color in every style in the Default CSSMenu Horizontal stylesheet to no avail.

Suggestions?

Thanks,
Tim

[Dr.CSS]

try taking the 'menuparent' out where ever you see it in the CSS, then style it by itself,, and you can take out the 'color' below the /* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

    mark

[skypanther]

Mark, I didn't have luck doing what you said. But, I've narrowed the issue down to this style block:

Code: Select all

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { 
	background-color: #E4E4C1; 
        color: #5C6F59;
	}

The color setting works for the menu item being rolled over, but not for its parent. I'm fairly sure I need to add a new selector for the element in the menuparentth element. But, adding

Code: Select all

#primary-nav li.menuparentth a { ... }

doesn't work...suggestions on the proper selector to add to get the parent link to change color, too?

Thanks,
Tim

[Russ]

I may have missed soemthing here but...
Setting
#primary-nav li.menuparentth a {
color: red;
}
will set the link to red unless you hover or it has been clicked or is active

#primary-nav li.menuparentth a:hover {
color: blue;
}
will set the link to blue on hover?

You just need to check that the actual li's have a class of 'menuparentth' in the correct div.
The order of links is CSS is important e.g. a: before hover etc.

Hope this helps,
Russ

[skypanther]

Well, thanks all for your help. I'm going to give up. I think to get this to work I would have to turn to Javascript. Basically, I want to change the styles assigned to one selector when you rollover a different one. I don't think that can be done with just CSS.

I've changed the rollover to a dark blue so that the light text shows up and it's good enough.

Thanks,
Tim

[Dr.CSS]

if you look at your source you will see that that link is marked 'menuparent' not menuparenth' thats what i was saying in the first post, if you want to see what can be done with the selectors check this menu out.

  mark

[skypanther]

Thanks Mark. I did catch the "h" difference and tried playing with it both ways.

The menu you reference exhibits the same behavior I was experiencing, but because of your color selections it's not a problem. Try this:

Point at Products (the submenu text is black)
Point at Products, In the Kitchen (the link text is white when rolled over)
Now, point at Shake Batter Mix (In the Kitchen returns to black)

Using your menu colors for an example, what I was trying to do was keep the In the Kitchen text white when you point at Shake Batter Mix.

My text color happened to be tan with a rollover background color of tan. Yours is black. So, your link text is still visible where mine "disappeared."

Tim