PDA

View Full Version : CSS Based Dropdown Hover Area Problem



sixrfan
Aug 11th, 2009, 03:50 PM
i just built my first CSS based dropdown but i'm having some problems tweaking the code.

you can see my current dropdown situation here: http://www.pooltees.com/new_index1.htm. The second item from the left in the top nav bar called "Designs" is the one with the dropdown effect applied.

i only want the dropdown to appear when someone hovers over the "DESIGNS" heading in the top nav bar. right now if someone hovers over anywhere in the area that is taken up by the designs dropdown, the dropdown appears. how do i fix?

thanks in advance!

cv_sudheer
Aug 11th, 2009, 03:58 PM
Hi,
I think you used hidden property of the control.
if yes use controlname.style.display="none",
(to hide the control)

controlname.style.display="",
(to show the control).

DisasterMax
Aug 11th, 2009, 04:38 PM
Hi :)
cv_sudheer was right, if you use javascript and hidden property...

I looked at your code, and you use opacity property instead. Don't :)
Use #hor_nav li ul {display:none} and #hor_nav li:hover ul {display:block}
Also, note - you have to include #hor_nav li ul {left:0} for IE browser

sixrfan
Aug 11th, 2009, 08:38 PM
I'm getting close thanks to your help. The dropdown doesnt appear now until you hover over "DESIGNS". However when you scroll down the items in the dropdown to select one of the links, the dropdown disapears. What am i missing? thanks!

Rowsdower!
Aug 12th, 2009, 06:10 AM
Hello and welcome to the forum.

Best practice is to fully validate your HTML code before working to resolve a CSS issue. Sometimes errors in your HTML will make the CSS go haywire and create a problem that doesn't otherwise exist. Check this out:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pooltees.com%2Fnew_index1.htm&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1

These 71 errors and 32 warnings all need to be handled before the CSS can even be considered to be reliably displayed.

Also, Opacity and filters are browser-specific things that are best not to use for public web pages (just my 2 cents).

Now, for your specific problem, this is caused by the top:29; positioning given to the submenu. Your mouse stops hovering over the anchor li element before you can reach the submenu (and this hovering over the "anchor" li element is the only reason you can see the submenu), so everything disappears. In order to fix this AND keep your submenu appearing down where it is you can pad your anchor's <a> element or pad the <li> anchor element itself on the bottom with 9px or more and this should fix the problem.

You should still DEFINITELY look into validating your page before you go any further though.

Good luck!