drop line sub menu wont align under main buttons - please help!

[martine]

Script: Drop Line Menu

Script URL:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/P10/

Problem:
heres the problem:
http://www.siriussafety.co.uk/TEST/our_experience_sirius_safety_management_health_and_safety_consultants.html
I'm trying to implement the drop line menu for a website im designing, apart from changing the colour of the buttons and arrows i haven't meddled, but the sub menu when it loads in is offset way to the right of the main menu buttons. I notice that when i reszie the browser window the sub menu appears move back slightly to the left, but not enough.

Please help! I need to have the sub menu align directly underneath the main buttons as in the example in the link above, but within the site which its shown in the link posted above.
I'm pretty familiar with css but im more of a designer than a programmer! Would really appreciate some advice on this.
Thanks! :0)

[azoomer]

Not sure if it will work, but you could try to add this in your css:

.droplinebar ul li ul {
margin-left:-363px;
}

But you will also have to lower the z-index in the div#title_text. It has a z-index:200 but you can try to change to 10 or something like this:


div#title_text {
z-index:10;
}

[martine]

Hi. Thanks for replying, i've tried that but doesnt seem to have helped.
I've uploaded the file again with the changes.

Anyone else have any suggestions - perhaps foolishly ive sold this menu in to my client and if i cant get it to work i'm in trouble!

[azoomer]

Hi
You have this in your css:


.droplinebar ul li ul{
position: absolute;
margin-left:-365;
z-index: 1000;
top: 0;
left: 0;
float: left; /* i added this*/
background: #ffffff; /*sub menu background color */
visibility: hidden;
}

Try to add px to the -365 like this:


.droplinebar ul li ul{
position: absolute;
margin-left:-365px;
z-index: 1000;
top: 0;
left: 0;
float: left; /* i added this*/
background: #ffffff; /*sub menu background color */
visibility: hidden;
}
I would expect that to help.

[azoomer]

Okay there is still a problem when the browser is resized. I get a better result with this:

.droplinebar ul li ul{
position: absolute;
z-index: 1000;
margin-left:-250px;
left:50% !important;
top: 0;
background: #ffffff; /*sub menu background color */
visibility: hidden;
}
Had to use !important to override some inline css