css drop down menu

[stonecloud]

hello, i am trying to get my css menu to drop down properly. for some reason if i place the code inside of a div tag the sub menu opens way down to the bottom right instead of directly underneath the main menu. what am i doing wrong. i have seen the same question before with no answer. please help! thanks. here's the link.......

http://www.thestonecloud.com/skop/skop.html

[tomywie]

I think it's because you're trying to position the navigation absolute..
But as an alternative you could always make #apDiv4 same height as your flashlogo
and set them both to float:left and then you just pad the navigation as much as you want.

It would be best to place the flash element before the navigation, as it is the flash you want above the navigation.

The css for these id's should look like this:

#flashContent {
	position: relative;
	top: 0;
	left: 0;
	float: left;
}

#apDiv4 {
	height: 203px;
	padding-top: 197px;
	float: left;
}

and the html should look like this:

<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="skop" align="middle" height="400" width="550">
<param name="movie" value="skop.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<param name="play" value="true">
<param name="loop" value="false">
<param name="wmode" value="transparent">
<param name="scale" value="showall">
<param name="menu" value="true">
<param name="devicefont" value="false">
<param name="salign" value="">
<param name="allowScriptAccess" value="sameDomain">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="skop_files/skop.swf" height="400" width="550">
<param name="movie" value="skop.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<param name="play" value="true">
<param name="loop" value="false">
<param name="wmode" value="transparent">
<param name="scale" value="showall">
<param name="menu" value="true">
<param name="devicefont" value="false">
<param name="salign" value="">
<param name="allowScriptAccess" value="sameDomain">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash"><img src="skop_files/get_flash_player.gif" alt="Get Adobe Flash player"></a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>

<div id="apDiv4">
<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
  <ul>
  <li><a href="#">Activities 1</a></li>
  <li><a href="#">Activities 2</a></li>
  <li><a href="#">Activities 3</a>
	  <ul>
	  <li><a href="#">Water Sports 1</a></li>
	  <li><a href="#">Water Sports 1</a></li>
	  <li><a href="#">Water Sports 1</a></li>
	  <li><a href="#">Water Sports 1</a></li>
	  </ul>
	</li>
  <li><a href="#">Activities 4</a></li>
  </ul>
</li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a>
  <ul>
  <li><a href="#">Traveling 1</a></li>
  <li><a href="#">Traveling 2</a></li>
  <li><a href="#">Traveling 3</a></li>
  <li><a href="#">Traveling 4</a>
	  <ul>
	  <li><a href="#">Africa 1</a></li>
	  <li><a href="#">Africa 2</a></li>
	  <li><a href="#">Africa 3</a></li>
	  <li><a href="#">Africa 4</a>
		  <ul>
		  <li><a href="#">Kenya 1</a></li>
		  <li><a href="#">Kenya 2</a></li>
		  <li><a href="#">Kenya 3</a></li>
		  <li><a href="#">Kenya 4</a></li>
		  <li><a href="#">Kenya 5</a></li>
		  </ul>
		</li>
	  </ul>
	</li>
  <li><a href="#">Traveling 5</a></li>
  </ul>
</li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>
</div>

best regards from toby