View Full Version : Chrome CSS Drop Down - left justifed dropdown menus?

02-17-2009, 04:30 PM
1) Script Title: Chrome CSS Drop Down Menu (v2.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem: The dropdown menus appear on the left-hand of the screen. Here's my template - http://www.odell4hair.com/templatewnavigation.html

I use homestead so I don't have great access to change the other coding on the pages. What line in the coding contols where the dropdown menu appears?

I have shut off the page center option but that did not resolve it. I also had it working at one point before I added the other elements on the page.

Any help you can provide would be so appreciated.


02-17-2009, 06:48 PM
Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.odell4hair.com/AboutDennis.html">Four Decades of Hair</a>
<a href="http://www.odell4hair.com/AwardWinningHair.html">Story of a Champion</a>
<a href="http://www.odell4hair.com/Showcase.html">Client Photos and Comments</a>
<a href="mailto:dennis@odell4hair.com">Email Dennis</a>

<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv">
<a href="http://www.odell4hair.com/RWS.html">Running With Scissors</a>
<a href="http://www.odell4hair.com/bizarresalonnames.html">Bizarre Salon Names</a>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv">
<a href="http://www.odell4hair.com/odell4hairsalon.html">About ODell4Hair Salon</a>
<a href="http://www.odell4hair.com/Products.html">Products</a>

<script type="text/javascript">


Since you did mention you don't have full access to your page's source and where to place things precisely, this is a problem. An alternative script you can try is All Levels Menu (see the Chrome theme on the Menu Generator page (http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/generator.htm)), which supports a feature that automatically moves the HTML for the drop down DIVs to the bottom of the page, theoretically bypassing the problem you're having.

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

02-18-2009, 12:04 PM
Still no luck. I tried the alternate script you gave and it looks even worse. See it at http://www.odell4hair.com/Templatewnavigation2.html

Is there no way to put coding in the .js file to force it to the bottom of the page? Can you recommend an alternate dropdown menu script that might work.

I really appreciate you taking the time to help.

02-19-2009, 01:41 AM
Make sure all the external files referenced by the script are uploaded, namely, the following files:

<link rel="stylesheet" type="text/css" href="http://www.odell4hair.com/ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="http://www.odell4hair.com/ddlevelsfiles/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="http://www.odell4hair.com/ddlevelsfiles/ddlevelsmenu.js">

For example, I see that the first file (http://www.odell4hair.com/ddlevelsfiles/ddlevelsmenu-topbar.css) isn't.