I’m trying to update a rather old web site (first created in 2004, so there are some bits left over from another age - like tables…)
The menu has a problem that unless the mouse is moved very accurately, the flyout submenus disappear quickly. So I tried to make a superfish menu, where I can delay the flyouts disappearing a little bit.
Then I started to style things and change the text color and background color, and weirdness started happening.
When a flyout submenu appears, only SOME of the links are the designated color!
When I changed the background color, only SOME parts of the flyout had the new color
The bit that I added, under demo skin section, that is causing the problems is this. Looks harmless doesn’t it?
.sf-menu li li a{
color:#fff;
background-image:url(); /* removes image used for top level of menu */
border-radius:0;
background-color:red;
}
The red background is just there as a quick demo of the problem.
You see the error by mousing over the main menu items and working your way down the main menu, watching the submenus. (Magazine has a sub-sub menu, same problem there too)
Any geniuses know how to sort this???
This is a charity group, and it’s lucky I’m not charging for this !
OOH I am soooo stupid - It’s the visited link color - I didn’t get round to changing that as well, so you see it correctly as a new visitor. I changed browser and got a different “wrong” set of colors as I accidentally clicked a link in the flyout. Thanks for making me try another browser.
I was trying to avoid changing too much at a time to avoid having to undo too many bits if I didn’t like the result. Time to get rid of that garish red and find a nicer color.
Is the problem resolved or is it still active? If still visible, please describe it again. I see that the red color is gone and do not see a difference between new and visited links in the submenus. If the colors should be different, please identify the colors. I notice that suckerfish.css has two background colors in this selector. Only the second one is applied, of course, and maybe this has nothing to do with the issue, but I thought it worth mentioning. This is the only :visited color in this file.
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #333;
[color=red]background-color: #3586AE;
background-color:#E6E6FA;[/color]
padding: 0em 0em 0.1em 0.5em;
background-image: url(images/grad.gif);
background-repeat:repeat-x;
border-bottom:3px solid #3586AE;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* margin-bottom:15px; a margin here means li picks up link background colour - sometimes good, sometimes not. either this or the one below, not both, have this padding */
Note, because the menu is created entirely with JavaScript, persons who browse without JavaScript enabled cannot use the site. There is no fallback.
Yes, resolved when I spotted the visited color had not been edited.
two background-colors - when I’m not sure if one color is better than the current one, I often put the alternative immediately below the existing one rather than comment it out, then delete either the new line or old line when I’ve decided which I prefer. Just forgot to delete the old line as I had to rush off for the weekend to do some flying. I’ll get rid of the unneeded line now. I used the red because it was more obviously wrong than the two shades of blue.
