CODEWITHSUNDEEP
csshovershow-hide
Philippe Allaire
Philippe Allaire

Reputation: 75

Css Show On Hover For My Nav

I usually dont have problems with css, and I'm made this nav menu myself but I just can't seem to understand why it will not show my div when I hover over an item ... I create a jsfiddle @ http://jsfiddle.net/LuLTM/ with all the code as well ...

#beautyworld #beautyhealth {display:none;}
#beautyworld #beautyhealth:hover {color:black;display:block!important}

I want when hover over div #beautyworld for the div #beautyhealth to appear ... I just dont understand why my css is not working .... Could someone please advise ? Thank You

Upvotes: 0

Views: 403

Answers (1)

Scott
Scott

Reputation: 658

I think the problem is that you are trying to have fire a hover over something that is currently 'display:none'. Since display none collapses the element, there is nothing to hover. You heed to have it hover at a relative parent level to cause the display of the child.

For example:

#beautyworld > div { display:none; }
#beautyworld:hover > div { color:black; display: block !important; }

Upvotes: 1

Related Questions