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: http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

Here is what it looks like on the test page am working on: http://66.51.163.67/Indexnew.cfm (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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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" />

</head>

<body>
<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>
</div>
<!-- end div#topnav -->

<div id="content">

<div class="column" id="left">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','250','height','250','title','La Zeste Menus','src','images/Zestnav','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/Zestnav' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,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="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="250" height="250"></embed>
</object></noscript>
</div>
<!-- end div.column div#left -->

<div id="center">

center content

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

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

<div id="footer">

footer

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


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


</body>
</html>

I better include the JavaScript file as well:

//Drop Down Tabs Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//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: http://www.dynamicdrive.com/)


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;
parentEl=parentEl.offsetParent;
}
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.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-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
obj2.parentNode.className="selected"
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},


iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},


clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 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
this.dropmenuobj.style.visibility="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
this.previousmenuitem.parentNode.className=""
}
}
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
this.showhide(this.dropmenuobj.style, e, obj)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "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.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu(obj2)
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu(obj2)
},


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


clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},


positionshim:function(){ //display iframe shim function
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
this.shimobject.style.left=this.dropmenuobj.style.left
this.shimobject.style.top=this.dropmenuobj.style.top
}
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
}
},


hideshim:function(){
if (this.enableiframeshim && typeof this.shimobject!="undefined")
this.shimobject.style.display='none'
},


isSelected:function(menuurl){
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")
document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
menuitems.onmouseover=function(e){
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

thanks

CG

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:

<html>
	<head>
		<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;}
		</style>
	</head>

	<body bgcolor = #888888>
		<div id="container">
			<div id="nav">
				<div id="colortab" class="ddcolortabs">
					<ul>
						<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>
					</ul>
				</div>

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

			</div>

			<div id="content">
				<center>
					<table border=0>
						<tr>
							<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>
						</tr>
					</table>
				
					<hr /><p>Bottom</p>
				</center>
			</div>
		</div>

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

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

				<script type="text/javascript">
				tabdropdown.init("colortab", 3)
				</script>
	</body>
</html>
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.