blank space at bottom of pages using Anylink CSS menu with drop-down divs

[JBwebdes]

I'm using the Anylink CSS menu on a web site. I have 3 drop-down menus on each site page. Each drop-down menu is created using a set of div tags, such as:


<div id="submenu2" class="anylinkcss">
<ul>
<li><a href="contractor_benefits.php">Benefits to Contractors</a></li>
<li><a href="contractor_testimonials.php">Contractor Testimonials</a></li>
</ul>
</div>

When I have these drop-down menu chunks of code on the page, it causes my browser scroll bar to become longer and for there to be about 300 pixels height of blank space below the content of the web page.

I tried moving the drop-down menu div tags to the bottom of the HTML code before the closing body tag. That did not help. When I deleted the drop-down menu div tags from the code, the blank space disappeared.

Any suggestions on how to get rid of this empty space at the bottom of the site pages? Thanks!

[ddadmin]

Inside anylinkcssmenu.css, make sure you have retained the below rule at the very end:


/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

Deleting this would cause a gap to appear.

[JBwebdes]

GREAT! This is just the info I needed. I ended up deleting the CSS code for the shadow because I couldn't get it to position correctly for both the vertical and horizontal drop-down menus on the pages. But I simply put the code back in and changed the background property to none and the extra space at the bottom of the page has disappeared. Thanks!

[ddadmin]

Instead of disabling the shadow by hacking the CSS, you can also do this by changing the setting in red inside the .js file:


effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects