New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

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

* Drop Down/ Overlapping Content- Dynamic Drive (
* This notice must stay intact for legal use.
* Visit for full source code


<!--Example #1: -->

<p>Demo #1: <a href="" id="searchlink" rel="subcontent">Search DD</a></p>

<DIV id="subcontent" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; width: 300px; padding: 8px;">

<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="" id="topform">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" />
<input value="Search" class="topformbutton" type="submit" />

<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent')">Hide this DIV manually</a> | <a href="">Dynamic Drive</a></div>


<!--Example #2: -->

<p align="right" style="margin-top: 400px">Demo #2 (click): <a href="" id="contentlink" rel="subcontent2">Additional Resources</a> </p>

<DIV id="subcontent2" style="position:absolute; visibility: hidden; border: 9px solid black; background-color: lightyellow; width: 350px; height: 120px; padding: 4px;">

<div style="width: 49%; float: left">
<li><a href="">Dynamic Drive</li>
<li><a href="">JavaScript Kit</li>
<li><a href="">CSS Drive</li>
<li><a href="">Coding Forums</li>

<div style="width: 49%; float: left">
<li><a href="">CNN</li>
<li><a href="">MSNBC</li>
<li><a href="">BBC News</li>
<li><a href="">Slashdot</li>

<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent2')">Hide this DIV manually</a></div>


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

dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
dropdowncontent.init("contentlink", "left-top", 300, "click")