CSS Navigation problem

Question

I have two problems with my Page right now

1st when I hover over administration, then go down to one of the sub items the font color turns gray.

2nd I cant figure out how to get the background of the sub items to be transparent at 80% using the color #ffffff. I want the purple to remain in the main item until you leave it.

Can anyone help me out?

emboss · Accepted Answer · 2011-08-28 15:57:55Z

2

[jsfiddle update]

1) Managed this using appropriate CSS selectors:

#navigation li.border:hover > a,
#navigation ul.sub-level a:hover {
    text-decoration:none;
    color: #fff;
}

The meaning is: "Select the immediate a child of li.border when hovered over (that's the menu title) and also select all a elements under ul.sub-level that are hovered over.

2) I'm not sure I understood correctly what you wanted - does my update suit your needs? I added a bit of transparency and I also added -moz-opacity: 0.6; for cross-browser compatibility.

answered Aug 28, 2011 at 15:57

emboss

39.7k7 gold badges103 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iPhoneDev85 Over a year ago

Thanks! As for the second one, I dont want it to be transparent purple, I want to be transparent white (#ffffff).

emboss Over a year ago

OK, the principle is the same - add a more specific rule to your CSS that selects just the hovered over sub-level lis and add background-color: white to it

Gerard · Accepted Answer · 2011-08-28 15:47:08Z

0

The first one has to do with your hover. When you hover over the item its text turns white. You then hover over the subitem, not over the item itself anymore, so obviously it turns back to its 'default' color which is gray. You could fix this with javascript, by adding a onmouseover="" to the entire border of which the item and subitems are part, and letting javascript set the color to white instead of only CSS. Not sure if this is possible with only CSS.

The second one I think I have an idea. I don't think its possible to just make the background transparent, but just give the div of the sub items an opacity of .8 or 80 for IE and create a div for just the text with the opacity set to 100.

Hope that helps?

edited Aug 28, 2011 at 15:47

answered Aug 28, 2011 at 15:40

Gerard

2,8693 gold badges29 silver badges40 bronze badges

Collectives™ on Stack Overflow

CSS Navigation problem

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related