CSS drop down menus won't stay still

[d.roc]

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

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

Hi all,

I have downloaded and customised the above script for use on my site; current test page is here: http://shawitservices.com/index_menu.php

The "main" div (922px wide and encompassing everything other than the outer background stripes along the top and bottom) is set with auto left and right margins in order for the background stripes to fill the browser window left and right and the div to center itself inside. The drop down menus work well when the browser window is no wider than this "main" div.

However, when the browser window is wider than the "main" div (ie you can see the background stripes on either side) the drop down menus fall in the wrong place (to the right of the menu heading).

If the "auto" margin setting for the "main" div is removed from my layout.css file (ie set to a fixed value instead), the menus always fall in the right place, however I like my layout with background stripes the way it is. :)

I'm OK with HTML, CSS and a little PHP (if a little sloppy), but JavaScript is still totally foreign to me.

So, my question is, can I make the script in this case reference the edge of the div that it is in (or a particular div I specify) rather than the browser window's edge (which I assume it to be referencing now) so as to keep the drop down menus in the same position regardless of browser window sizing?

Thanks,

Mat

PS I have renamed the css and js files from their original names to dropdown.css and dropdown.js

[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:


<!--Services drop down menu -->

<div style="height: auto; overflow: hidden; visibility: hidden; left:
-1000px; top: -1000px;" id="dropmenu1" class="dropmenudiv">
<a href="http://shawitservices.com/services.php">All Services</a>
<a href="http://shawitservices.com/melbourne-laptop-repairs/">Laptop
Repairs</a>
<a href="http://shawitservices.com/melbourne-computer-repairs/">Computer
Repairs</a>
<a href="http://shawitservices.com/melbourne-laptop-lcd-screen-repairs/">Laptop
Screen Repairs</a>
<a href="http://shawitservices.com/services.php#addserv">Additional
Services</a>
</div>

<!--Info drop down menu -->

<div style="height: auto; overflow: hidden; visibility: hidden; left:
-1000px; top: -1000px;" id="dropmenu2" class="dropmenudiv">
<a href="http://shawitservices.com/info.php">General Info</a>
<a href="http://shawitservices.com/viruses.php">Viruses</a>
<a href="http://shawitservices.com/maintenance.php">Regular Maintenance</a>
<a href="http://techrelatedrants.blogspot.com/">Our Blog</a>
</div>

<!--Contact drop down menu -->

<div style="height: 41px; overflow: hidden; visibility: hidden; left:
-1000px; top: -1000px;" id="dropmenu3" class="dropmenudiv">
<a href="http://shawitservices.com/contact.php">Contact Information</a>
<a href="mailto:info@shawitservices.com">Email Us</a>
<a href="msnim:chat?contact=info@shawitservices.com">Chat To Us Live</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

</body>

[d.roc]

Thank-you very much, it works perfectly now.

Just a question about the code you posted though: The extra 'style' info in the div tags that isn't in the original code (height, overflow etc) - does it need to be there? The menus seem to work fine without it...

Cheers,

Mat

[ddadmin]

Just a question about the code you posted though: The extra 'style' info in the div tags that isn't in the original code (height, overflow etc)

Nope you can just omit the "added" styles, as they are in fact dynamically applied to the DIVs by the script already.