Position problem with DD/Overlapping Content

[alexp]

1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: This is a great script but I am having issues with the position of the drop down content. It is set to mouseover and when hovering over the anchor link the position of the drop down content changes depending on the size of the browser window.

The subcontent div is set as position:absolute, and the container div is centered in the browser window.

When the window is the same size as the container div the position is perfect, but as the browser window size is increased the position of the drop down content moves further away from the link to the point that you cant access it as it disappears once you move off the link.

The only way I can solve the horizontal position is to use position:fixed (which works perfect regardless of browser window size) but that obviously causes vertical position problems if the page has been scrolled at all.

It is happening in all browsers. Has anyone else experienced this? Can anyone help?

[ddadmin]

Does this happen with the DD demo as well, or just on your own page? If the later, please post a link to the page on your site that contains the problematic script so we can check it out.

[alexp]

I have uploaded a page showing what I mean. I am using the script for a drop down menu. Hover over 'products' to see the DD content. If you resize the browser window the position of the drop down content changes.

URL: (just a test page for this issue) http://www.sghitech.com/siteDemo/

[ddadmin]

Most of the positioning problems with this script can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<div id="subcontent">
<div id="subList1">
<ul class="subList">
<li class="range"><h4><b>Range 1</b></h4></li>
<li><a href="#">Item A</a></li>

<li><a href="#">Item B</a></li>
<li><a href="#">Item C</a></li>
<li><a href="#">Item D</a></li>
<li><a href="#">Item E</a></li>
<li><a href="#">Item F</a></li>
<li><a href="#">Item G</a></li>

</ul>
</div>
<div id="subList2">
<ul class="subList">
<li class="range"><h4><b>Range 2</b></h4></li>
<li><a href="#">Item H</a></li>
<li><a href="#">Item I</a></li>

<li class="range"><h4><b>Range 3</b></h4></li>
<li><a href="#">Item J</a></li>
<li></li>
<li><a href="#"><b>Item K</b></a></li>
</ul>
</div>
<div id="subList3">

<ul class="subList">
<li class="range"><h4><b>Extras</b></h4></li>
<li><a href="#">Item L</a></li>
</ul>
</div>
</div>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("menulink", "right", 500, "mouseover");
</script>

</body>

p.s: You seem to be missing the drop down DIV with ID="subcontent1".

[alexp]

Perfect, that has solved the problem - I hadnt thought to try that.

Thanks for your help.