How do I make my drop down menus overlap my page content ?

WARNING : You must have some intermediate HTML knowledge to achieve this.

1. Make the background of your Flash animation transparent.

You will find how here.

Here is the original menu :

Here is the tranparent background menu :

2. Enclose your Flash animation into a HTML <div> layer.

Here is how it's done ( in red ) :


<div>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=9,0,0,0" width="560" height="182">

<param name="movie" value="menu.swf" />

<param name="quality" value="best" />

<param name="menu" value="true" />

<param name="allowScriptAccess" value="always" />

<embed src="menu.swf" quality="best" menu="true" width="560" height="182" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always" />

</object>

</div>

Here is the result ( I've put a dashed border around the div layer so you can better understand what is happening ) :

3. Set the position of your menu's div to absolute.

Here is how it's done ( in red ) :


<div style="position: absolute;">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=9,0,0,0" width="560" height="182">

<param name="movie" value="menu.swf" />

<param name="quality" value="best" />

<param name="menu" value="true" />

<param name="allowScriptAccess" value="always" />

<embed src="menu.swf" quality="best" menu="true" width="560" height="182" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always" />

</object>

</div>

Let's see what this will do.
Let's say we have 2 div layers, one with our menu, and another with the content we want to overlap :

BEFORE SETTING POSITION TO ABSOLUTE :



<div>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=9,0,0,0" width="560" height="182">

<param name="movie" value="menu.swf" />

<param name="quality" value="best" />

<param name="menu" value="true" />

<param name="allowScriptAccess" value="always" />

<embed src="menu.swf" quality="best" menu="true" width="560" height="182" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always" />

</object>

</div>



<div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vehicula lacus sit amet odio. Pellentesque egestas pellentesque urna. Duis ante. Mauris quis sapien nec lectus vulputate ornare. Ut elementum, libero euismod volutpat placerat, mauris turpis malesuada diam, vel commodo magna nisl nec augue. Nullam lectus neque, varius at, dapibus nec, faucibus id, neque. Pellentesque luctus purus in enim luctus imperdiet. Morbi tristique elementum pede. Sed sit amet lorem. Nunc consectetuer lacinia justo. Etiam molestie hendrerit arcu. Vestibulum nulla elit, dictum a, porta in, dignissim vel, est. Cras purus. Aliquam erat volutpat. Nullam orci. Morbi felis. Curabitur purus quam, placerat ac, ullamcorper id, egestas nec, arcu. Nulla lectus.

</div>

Here will be the result of the above code ( I've put a dashed border around the div layers so you can better understand what is happening ) :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vehicula lacus sit amet odio. Pellentesque egestas pellentesque urna. Duis ante. Mauris quis sapien nec lectus vulputate ornare. Ut elementum, libero euismod volutpat placerat, mauris turpis malesuada diam, vel commodo magna nisl nec augue. Nullam lectus neque, varius at, dapibus nec, faucibus id, neque. Pellentesque luctus purus in enim luctus imperdiet. Morbi tristique elementum pede. Sed sit amet lorem. Nunc consectetuer lacinia justo. Etiam molestie hendrerit arcu. Vestibulum nulla elit, dictum a, porta in, dignissim vel, est. Cras purus. Aliquam erat volutpat. Nullam orci. Morbi felis. Curabitur purus quam, placerat ac, ullamcorper id, egestas nec, arcu. Nulla lectus.

AFTER SETTING POSITION TO ABSOLUTE :



<div style="position: absolute;">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=9,0,0,0" width="560" height="182">

<param name="movie" value="menu.swf" />

<param name="quality" value="best" />

<param name="menu" value="true" />

<param name="allowScriptAccess" value="always" />

<embed src="menu.swf" quality="best" menu="true" width="560" height="182" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always" />

</object>

</div>



<div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vehicula lacus sit amet odio. Pellentesque egestas pellentesque urna. Duis ante. Mauris quis sapien nec lectus vulputate ornare. Ut elementum, libero euismod volutpat placerat, mauris turpis malesuada diam, vel commodo magna nisl nec augue. Nullam lectus neque, varius at, dapibus nec, faucibus id, neque. Pellentesque luctus purus in enim luctus imperdiet. Morbi tristique elementum pede. Sed sit amet lorem. Nunc consectetuer lacinia justo. Etiam molestie hendrerit arcu. Vestibulum nulla elit, dictum a, porta in, dignissim vel, est. Cras purus. Aliquam erat volutpat. Nullam orci. Morbi felis. Curabitur purus quam, placerat ac, ullamcorper id, egestas nec, arcu. Nulla lectus.

</div>

Here is the result of the above code ( I've put a dashed border around the div layers so you can better understand what is happening ) :

As you can see above the main buttons overlap the page content. This is not desired.

4. Adjust, if needed, the position of your page content.

There are many ways to do that, here I've edited the top padding ( style="padding-top: 35px;" ) of the blue div with the desired height value :

The final result :