CSSMenu Vertical - Active parent font color

[Andor]

Hi all,
For several hours I've been trying to get my CSSMenu to work as I want and now I'm probably too tired to see what else I can try.

To make it easier to explain, a pic of what I encounter:



The plan/idea:

* Inactive elements - light blue bg, white text - working
* Active element - darker blue bg, white text - working
* Element On hover - white bg, black text - working
* Parent to the one hovered over - white bg, black text - the white bg working but not the black text.

I can't understand why the white bg is kept when moving from the parent to a child but not the black text 

Any ideas on what I'm missing?

Below you'll see the part of the CSS I'm working on.

Thanks,
Andor

---

/* Styling the basic apperance of the menu elements */

#primary-nav a {
border: 1px solid #6666CC;
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
color: #fff;
font-weight: normal;
}

#primary-nav li, #primary-nav li.menuparent {
background-color: #9999FF;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
background-color: #6666CC;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav li.menuparent, #primary-nav li.menuparent:hover, #primary-nav li.menuparenth {
background-image: url(modules/MenuManager/images/arrow1.gif);
background-position: center right;
background-repeat: no-repeat;
}

/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh, #primary-nav a:hover {
color: #000;
background-color: #fff;
}

[jelle]

ok, so your black & white would be done by this snippet:

Code: Select all

* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh, #primary-nav a:hover { 
   color: #000;
   background-color: #fff; 
   }

But which of the selectors is actually selecting the white on white field? My Hunch is that there is another part overriding your black color, but that is not in the code you posted.
Are you searchin in the code in the db or in the css code as served out?

[Andor]

Thanks for your response 

I'm searching the through CSS in the admin interface (if that's what you mean). Is it a more effective way to search for code? I mean, in my case it would have been nice to be able to search for 'color: #fff' (a suggestion for the next release? )

As far as I know, I haven't changed the font color in any other of the style sheets after the fresh install.

I must admit that I don't have the full picture of what all the different selectors are designed for (eg. li.menuh, li.menuparenth, li.menuactiveh, li.menuparent) which make it even more challenging for me.

I'll just do a 'manual search' through the style sheets attached to the template and see if I can figure out what's going wrong...

Do you think my browser (IE) may be the guilty one here?

Andor

[Greg]

Are you using IE 7 beta 2 ? If so check here

[Andor]

Thanks for your suggestion

I tried your hack - even if I have IE 6.0.2 - but it didn't help. I really don't understand what it is that cause this strange behaviour, but I'm still looking 

Andor

P.S. Nice car you want; a Ford Shelby GR-1?

[westis]

Actually, what you're trying to achieve is impossible, I'm sorry to say...

The thing is that you can change the font color of the anchor that you are currently hovering, which is "Horizontal (EllNav)" in your example. So far so good.

But the link of the parent to that element takes the link color of any link for the menu, that is white. When you hover an element on the second level, the first level is just like any other link in the menu.

But the background is white, because the background color is set for the li, not the a. And the li is hovered on all levels, thus the background is changed both on the first and second level.

I'm not sure I've made myself clear, this has been up for discussion a couple of times before. The thing is that without using JavaScript, this is not possible to achieve with CSS only. And the reason: only one anchor can be hovered at the same time.

About the list item selectors (li.menuh, li.menuparenth, li.menuactiveh, li.menuparent), the h at the end is for the JavaScript that must be used for IE, as IE isn't so clever when it comes to hovering other items than anchors. The class menuparent means that li has children. The class menuactive means that that li is the currently active page.

Hoep that helps.

[Andor]

Yes, it helps - and saved me from going nuts  Tack för hjälpen, Daniel!

I suspected something like that was the reason and since it is so amazingly easy to play around with the solution you guys have developed, I changed the design once more 

A motto of mine is to learn at least one new thing every day. Working with the CMSMS is a plain joy and after just a couple of weeks of experimenting I have learned a lot, thanks to the simple and logic structure - and to this forum.

Thanks again!

Andor

[westis]

Yes, it helps - and saved me from going nuts  Tack för hjälpen, Daniel!