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>
