Log in

View Full Version : Submenu drops at wrong location on Scrolling


srinicoder
03-30-2010, 08:45 PM
The submenu drops at the wrong location if there is a scrollbar with overflow:auto setting. If the html within the <div> does not cause an overflow, then it works file. But if it causes an overflow, it does not work correctly, and the submenu drops at the point



<html>
<head>
<title>AnyLink Css example</title>
<link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />

<script type="text/javascript" src="anylinkcssmenu.js">

/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>
</head>
<body>

<div id="mydiv">
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
</div>
</body>
</html>




// for the mydiv style
#mydiv {
height: 300px;
overflow: auto;
}


Rest of the code used is the anylinksmenu.css and anylinksmenu.js
srinicoder
04-06-2010, 07:46 PM
Hello. Can anyone atleast please acknowledge that this is a bug, or am I missing something?

Thanks.
molendijk
04-07-2010, 07:54 PM
Seems to be a bug indeed.
Go to http://www.dynamicdrive.com/forums/ to report it (bug reports).
===
Arie Molendijk.
srinicoder
04-07-2010, 08:21 PM
Thanks Arie. Posted a bug report. Lets see....