need help in Chrome CSS Drop Down Menu

[msrotter]

here is the link to the original code (Chrome CSS Drop Down Menu)
http://www.dynamicdrive.com/dynamici...rome/index.htm

Hello to everyone,
I have used with Chrome CSS Drop Down Menu into my site to build some titles tree. However i am getting some problems regarding to resolution issues and some more.
first I have succeed to build the code into my site nicely but not good enough though. When i open the tree titles it moves a little to the right in every browser i used and not straight as it should be.

the second problem i am having is regard to internet Explorer browser.
if i change my screen resolution higher than 1024X768 the tree will move to the right even further than before and misplace the title eventually.

and here is my site if you want to see for yourself:
http://wordpress.iphoneil.net/wordpress/

If you need some more information please tell me.

thank you in advance.

[ivoryblue1]

I apologize that I can't help you... I can tell you that your pop up windows are actually moving to the left in Safari, not to the right as they are in other browsers. So I guess all I did was complicate your issue more. :-)

However, I am also having a trouble with this script that you seem not to be having. Possibly you could help me? In IE and Safari, the background images on my menu are not displaying. It only shows a red x (IE) or a blue ? (Safari). In Firefox, it displays perfectly. Here's a link to my site. Please check it out and see if you know what I'm doing wrong, since everything is displaying properly for you. http://www.sbac.edu/~ovms/newsite/Untitled-2.html

Thanks, if you can! :-)

[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="dropmenu1" class="dropmenudiv" style="width: 110px;">
<a href="http://www.iphoneil.net/?cat=155">המקור של האתר</a>
<a href="http://www.iphoneil.net/?p=8973">מדריך יצירת סורס</a>
</div>

<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 110px;">
<a href="http://www.iphoneil.net/?p=10766">שליחת כתבה לאתר</a>
<a href="http://www.iphoneil.net/?p=10766">שליחת תוכן למקור</a>
</div>

<!--3nd drop down menu --> 
<div id="dropmenu3" class="dropmenudiv" style="width: 130px;">
<a href="http://www.iphoneil.net/?p=10773">הורדת קושחה</a>
<a href="http://www.iphoneil.net/?p=10783">רשימת סורסים קהילתיים</a>
</div>

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

</body>

[msrotter]

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" style="width: 110px;">
<a href="http://www.iphoneil.net/?cat=155">המקור של האתר</a>
<a href="http://www.iphoneil.net/?p=8973">מדריך יצירת סורס</a>
</div>

<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 110px;">
<a href="http://www.iphoneil.net/?p=10766">שליחת כתבה לאתר</a>
<a href="http://www.iphoneil.net/?p=10766">שליחת תוכן למקור</a>
</div>

<!--3nd drop down menu --> 
<div id="dropmenu3" class="dropmenudiv" style="width: 130px;">
<a href="http://www.iphoneil.net/?p=10773">הורדת קושחה</a>
<a href="http://www.iphoneil.net/?p=10783">רשימת סורסים קהילתיים</a>
</div>

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

</body>

Thank you very much for your help. I try to do exactly what you suggested but it didn't change anything really.
do you have maybe any more options?

I uploaded my header.php if you need.
http://dl.getdropbox.com/u/344445/So...header.php.zip