CODEWITHSUNDEEP
htmlcssnavigation
iPhoneDev85
iPhoneDev85

Reputation: 51

CSS Navigation problem

I have two problems with my Page right now

http://jsfiddle.net/aE2BB/1/

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?

Upvotes: 1

Views: 116

Answers (2)

emboss
emboss

Reputation: 39620

[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.

Upvotes: 2

Gerard
Gerard

Reputation: 2860

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?

Upvotes: 0

Related Questions