offset menu

[queslett]

1) Script Title: Chrome CSS Drop Down Menu (v2.5)

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

3) Describe problem: on www.jaybee.co.uk/cliovan.php I have includedd the script in a pho includes....
but as you can see the drop down menus become off set? do not understand why?

kind regards


Queslett

[ddadmin]

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="dropmenu2" class="dropmenudiv">
<a href="http://jaybee.co.uk/twingoextreme.php">Twingo Extreme</a>
<a href="http://jaybee.co.uk/twingodynamique.php">Twingo Dynamique</a>
<a href="http://jaybee.co.uk/twingogt.php">Twingo GT</a>
<a href="http://jaybee.co.uk/twingosport.php">Twingo Renaultsport 133</a>

<a href="http://jaybee.co.uk/cliothreedoor.php">Clio 3-door</a>
<a href="http://jaybee.co.uk/cliofivedoor.php">Clio 3-door</a>

</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

</body>

[queslett]

I understand what you have said above, but its in an "includes" so it will appear on every page

so how do I get around that as the includes has to appear in a div in order to place it in the correct position or is there another way of doing this?

[queslett]

ok these are just the last few lines of my code showing you where I have placed the chrome menu code

<div class="jaybeeright2">
    <?php include ("includes/renaultoffers.php"); ?>
  </div>

  <div class="jaybeeaddress">
    <?php include ("includes/jaybeeaddress.php"); ?>
  </div>
      <div class="navigation">
    <?php include ("includes/chromemenu/demo.php"); ?>
  </div>
</div>
</body>
</html>

[ddadmin]

One thing you can try if you can't manually move the HTML for the drop down DIVs to the end of the page is to do so via scripting. Try finding the line in red below inside the .js file, and add to it the following:

				this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
				this.addEvent(window, function(){document.body.appendChild(relvalue)}, "load")

Untested, but worth a shot.

[queslett]

i have added the code as outlined and i still get the same effect... smiles

I appreciate your help.

[ddadmin]

Ah yes, there was an error in the new line I posted. It should be the following instead:

this.addEvent(window, function(){document.body.appendChild(asscdropdownmenu)}, "load")