CSS issue with ddlevelsmenu

[tsutton]

1) Script Title: ddlevelsmenu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

3) Describe problem: I'm working with ddlevelsmenu for the first time, and everyhting is working well, no problems. However, I have noticed in both IE and Firefox that any page the has the drop down menu on it will have about 500px of margin below the page, resulting in the browser scroll bar activating, where you just scroll down over nothing. I was able to jump into the CSS - specifically this section:

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
position: absolute;
list-style-type: none;
background: white;
border: 1px solid #313131;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

"visibility: hidden" seems to be the issue.

Although the visibility is set to "hidden" the submenu s that reside outside all other DIVs just above the </body> tag (as instructed) ... do take up "realestate" on the page, and I guess the browser is figuring that it needs the scroll bar.

<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->

I jumped into the CSS and changed "visibility: hidden;" to "display: none;" - and this took care of the scroll bar issue. Of course the problem now is that the submenus don;t display. I couldn;t find anything in the .js cade that migth have indicated where I could activate the submenus by changing the display property.

Any ideas?

Sorry I don't have a page to show you - the site is still in production. If need be I can throw a test page up to illustrate.

Thanks much!

[tsutton]

Doing some more digging, and it appears as though the issue is CSS related - here's a good example of the differences between "visibility=hidden" and "display=none"

http://webdesign.about.com/od/exampl...lfaqhidden.htm

So my problem with the ddlevelsmenu is that the submenus I have are fairly long, and because they are hidden using the visibility property, they are taking up room on the bottom of the page and causing a large blank space under my web page.

I did find the related code in the .js file:

submenu.parentNode.style.visibility="hidden"
submenu.style.visibility="hidden"

and I've tried to update all instances of that to:

submenu.parentNode.style.display="none"
submenu.style.display="none"

and of course, instances to show the submenu:

submenu.parentNode.style.display="block"
submenu.style.display="block"

but ... it has funky results.

Anybody have any suggestions?

[ddadmin]

You shouldn't have to change the DIV's "visibility" property to "display" instead, as by default its left and top properties are also defined, positioning the DIV at the upper left corner of the page, overlapping existing content instead of taking up real estate of its own:

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

Did you remove these two properties from your .css file?

[tsutton]

That took care of it - thank you.

This project was initially started months ago, and left dormant for a while. The CSS ddlevelsmenu was implemented in the early days. Back then I did revised the CSS in some places to style the menu duifferently ... can;t remember removing those properties (not sure why I woudl have) ... but I guess I did. anyway - of course, that's the answer. Thanks for the prompt response, and excellent script.