After hours of searching for for a nice looking drop-down menu in CSS I found the perfect one on the Dynamic Drive website. It's working wonderfully - as long as I don't try and position it anywhere on the page except for the default position. As soon as I moved the top menu, the drop-down menu practically disappears off the side of the page. I've looked at the three files involved (a JavaScript file, a CSS file, and the HTML file) for hours until I'm cross eyed but none of the fixes I've tried worked. That's probably because I don't really do any JavaScript coding and I suspect the problem is there.

Here is the link to the drop down menu - Example #4:

Here is what it looks like on the test page am working on: (you'll see the drop-down boxes are off to the right of the page)

And below is the main html file:
I enclose the Nav bar in a Div ID called "topbuttons" and coded it like this:
position: relative;
width: 400px;
top: -12%;
right: 0px;
left: 42%;

The top-level menu is exactly where I want it. The drop-down boxes are driving me absolutely nuts. If I can't get help on this, I'll have to scrap the whole nav bar :'( - something I'd hate to do because it looks great and I've already sunk hours into it trying t get it to work :(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Le Zeste Catering and Consulting</title>

<!-- Meta Information -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Keywords" />
<!-- Stylesheets --><br />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="CSS/default.css" rel="stylesheet" type="text/css" />


<div id="container">

<div id="header"><img src="images/TopBar.jpg" alt="Le Zeste Catering Menu Items" /> </div>
<!-- end div#header -->

<div id="toplogo">
<div id="logo"> <img src="images/LaZesteLogoTop.gif" alt="La Zeste Logo" /></div>

</div> <!-- end div#toplogo -->

<div id="topnav">
<div id="logo2"> <img src="images/LeZesteLogoBottom.gif" alt="La Zeste Logo" /></div>
<div id="topbuttons"> <cfinclude template="NavTest1.html"></cfinclude></div>
<!-- end div#topnav -->

<div id="content">

<div class="column" id="left">
<script type="text/javascript">
AC_FL_RunContent( 'codebase',',0,19,0','width','250','height','250','title','La Zeste Menus','src','images/Zestnav','quality','high','pluginspage','','movie','images/Zestnav' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=",0,19,0" width="250" height="250" title="La Zeste Menus">
<param name="movie" value="images/Zestnav.swf" />
<param name="quality" value="high" />
<embed src="images/Zestnav.swf" quality="high" pluginspage="" type="application/x-shockwave-flash" width="250" height="250"></embed>
<!-- end div.column div#left -->

<div id="center">

center content

</div> <!-- end div#center -->

</div> <!-- end div#content -->

<div id="footer">


</div> <!-- end div#footer -->

</div> <!-- end div#container -->


Recommended Answers

All 8 Replies

I better include the JavaScript file as well:

//Drop Down Tabs Menu- Author: Dynamic Drive (
//Created: May 16th, 07'

var tabdropdown={
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableiframeshim: 1, //1 or 0, for true or false

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie:

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
return totaloffset;

showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
if ( || this.firefox)"-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
else if (e.type=="click")

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
var && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
} 0 : "1px" //Add 1px top border to menu if dropping up
return edgeoffset

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null){ //hide previous menu"hidden" //hide menu
if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
if (||this.firefox){
obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
this.showhide(, e, obj)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top"), "rightedge")+"px", "bottomedge")+obj.offsetHeight+1+"px"
this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
this.positionshim() //call iframe shim function

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;

dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
var evtobj=window.event? window.event : e
if (!this.dropmenuobj.contains(evtobj.toElement))
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))

this.delayhide=setTimeout(function(){'hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu

if (this.delayhide!="undefined")

positionshim:function(){ //display iframe shim function
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
if ("visible"){"px""px"
}"visible")? "block" : "none"

if (this.enableiframeshim && typeof this.shimobject!="undefined")'none'

var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (tabdropdown.currentpageurl==menuurl)

init:function(menuid, dselected){
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var menuitems=document.getElementById(menuid).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems.getAttribute("rel")){
var relvalue=menuitems.getAttribute("rel")
var event=typeof e!="undefined"? e : window.event
tabdropdown.dropit(this, event, this.getAttribute("rel"))
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems.href)){
menuitems.parentNode.className+=" selected default"
var setalready=true
else if (parseInt(dselected)==i)
menuitems.parentNode.className+=" selected default"


Ermmm seems to be working in IE6 and MFF1.5 on Win XP SP2

We need the css too.

Hi MidMagic,

I had to get this working (cauase the job needs to get finished), so I kept thinking of different solutions to try. That evening I managed to fix the problem. If anyone else is having problems with the drop-down boxes lining up when you position the nav bar with CSS - let me know and I'll send you the fix.

Hi MidMagic,

I had to get this working (cauase the job needs to get finished), so I kept thinking of different solutions to try. That evening I managed to fix the problem. If anyone else is having problems with the drop-down boxes lining up when you position the nav bar with CSS - let me know and I'll send you the fix.

Ok i think i hva ethe exact same problem using the same control all i seem to get is 'tabdropdown' is undefined.

If you have a fix could you please send it to me



Could this be a problem with different screen resolutions making a mess of absolute and relative rendering?

Either do everything absolute with reference to the same fixed point, or do all of the relative addressing the same way.

Hi MidMagic,

I had to get this working (cauase the job needs to get finished), so I kept thinking of different solutions to try. That evening I managed to fix the problem. If anyone else is having problems with the drop-down boxes lining up when you position the nav bar with CSS - let me know and I'll send you the fix.

Please post the fix so others can view it. I am experiencing the same issues.

Thanks in advance.

I I figured it out from a message on another forum. Basically, you need to remove the dropdown menu divs outside everything except for the <body>. Here is the code sample:

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

		<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />

		<style type="text/css">
			td {padding=2px;}
			#container {position: absolute; left: 50%; width: 750px; margin-left: -375px; border: 0px; background-color: silver;}
			#content {margin-top: 20px;}
			#nav {position: fixed; top: 0; width: 750px; border-top: 2px solid black; border-bottom: 1px solid black;}

	<body bgcolor = #888888>
		<div id="container">
			<div id="nav">
				<div id="colortab" class="ddcolortabs">
						<li><a href="" title="Home"><span>Home</span></a></li>
						<li><a href="" title="About" rel="dropmenu1_a"><span>About</span></a></li>
						<li><a href="" title="Contact"><span>Contact</span></a></li>
						<li><a href="" title="Audio" rel="dropmenu2_a"><span>Audio</span></a></li>
						<li><a href="" title="Links"><span>Links</span></a></li>

				<div class="ddcolortabsline">&nbsp;</div>


			<div id="content">
					<table border=0>
							<td style="padding=40px;">Left Side</td>
							<td style="padding=40px;"><img src="" width=300px height=200px /></td>
							<td style="padding=40px;">Right Side</td>
					<hr /><p>Bottom</p>

				<!--1st drop down menu-->
				<div id="dropmenu1_a" class="dropmenudiv_a">
					<a href="">Brief</a>
					<a href="">Prices</a>
					<a href="">Open Slots</a>

				<!--2nd drop down menu-->
				<div id="dropmenu2_a" class="dropmenudiv_a">
					<a href="">Beginners</a>
					<a href="">Intermediate</a>
					<a href="">Advanced</a>

				<script type="text/javascript">
				tabdropdown.init("colortab", 3)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.