Help needed on horizontal css menu

[dreamabstract]

Hi

I have put together a css menu for a clients website, and i've hit a few problems with one of the dropdown menus in particular which causes a horizontal scrollbar to appear when you first open the page. When you view the site on a smaller screen the sub menu option for Financial Solution Online shifts over to the left (I'm currently using 1680 x 1050 so i dont see this issue unless i minimise the browser)This problem exists both in IE and FFox. Any suggestions on how to fix the issue with the Financial sub menu? I know it has something to do with the negative margin-left value, can I achieve the positioning on this particular submenu another way?

I enclose the relevent css below

The link to the page to view the html code is here:

http://www.europadesigns.co.uk/alcazaba/final/



CSS

Code: Select all

/* ------------------ DROP DOWN MENU STYLE with background image ------------------------- */

.menusub1 { position:absolute; visibility: hidden; 
line-height: 18px; z-index: 160; display: inline; margin-top:5px; width:550px; margin-left:13px}
.menusub1 a{ width: 100%; font-weight:normal; padding-left: 0px; text-decoration: none; display: inline; line-height:150%;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4D4D4D;
background: #FFFFFF; border-right: 1px solid #FFFFFF; }
.menusub1 a:hover{color: #7e8a7b;
}
.menusub2 { position:absolute; visibility: hidden; 
line-height: 18px; z-index: 160; display: inline;margin-top:5px; width:650px;}
.menusub2 a{ width: 100%; font-weight:normal; padding-left: 0px; text-decoration: none; display: inline; line-height:150%;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4D4D4D;
background: #FFFFFF; border-right: 1px solid #FFFFFF; }
.menusub2 a:hover{color: #7e8a7b;
}
.menusub3 { position:absolute; visibility: hidden; 
line-height: 18px; z-index: 160; display: inline;margin-top:5px; margin-left:13px; width:550px;}
.menusub3 a{ width: 100%; font-weight:normal; padding-left: 0px; text-decoration: none; display: inline; line-height:150%;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4D4D4D;
background: #FFFFFF; border-right: 1px solid #FFFFFF; }
.menusub3 a:hover{color: #7e8a7b;
}
.menusub4 { position:absolute; visibility: hidden; 
line-height: 18px; z-index: 160; display: inline;margin-top:5px; margin-left:13px; width:550px;}
.menusub4 a{ width: 100%; font-weight:normal; padding-left: 0px; text-decoration: none; display: inline; line-height:150%;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4D4D4D;
background: #FFFFFF; border-right: 1px solid #FFFFFF; }
.menusub4 a:hover{color: #7e8a7b;
}
.menusub5 { position:absolute; visibility: hidden; 
line-height: 18px; z-index: 160; display: inline;margin-top:5px; margin-left:16px; width:350px;}
.menusub5 a{ width: 100%; font-weight:normal; padding-left: 0px; text-decoration: none; display: inline; line-height:150%;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4D4D4D;
background: #FFFFFF; border-right: 1px solid #FFFFFF; }
.menusub5 a:hover{color: #7e8a7b;
}
.menusub6 { position:absolute; visibility: hidden; 
line-height: 18px; z-index: 160; display: inline;margin-top:5px; margin-left:-237px; margin-right:auto; width:500px;}
.menusub6 a{ width: 100%; font-weight:normal; padding-left: 0px; text-decoration: none; display: inline; line-height:150%;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4D4D4D;
background: #FFFFFF; border-right: 1px solid #FFFFFF; }
.menusub6 a:hover{color: #7e8a7b;
}
.menusub7 { position:absolute; visibility: hidden; 
line-height: 18px; z-index: 160; display: inline;margin-top:5px; margin-left:auto; margin-right:auto; width:500px;}
.menusub7 a{ width: 100%; font-weight:normal; padding-left: 0px; text-decoration: none; display: inline; line-height:150%;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4D4D4D;
background: #FFFFFF; border-right: 1px solid #FFFFFF; }
.menusub7 a:hover{color: #7e8a7b;
}

[shalom_m]

Don't like the html (tables) on this one.

But for a quick fix try:

Code: Select all

.menusub7 { position:absolute; visibility: hidden; 
line-height: 18px; z-index: 160;  display: inline;margin-top:5px; margin-left:-150px; margin-right:auto; width:auto;}
.menusub7 a{ width: 100%; font-weight:normal; padding-left: 0px; text-decoration: none; display: inline; line-height:150%;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4D4D4D;
background: #FFFFFF; border-right: 1px solid #FFFFFF; }
.menusub7 a:hover{color: #7e8a7b;
}

Changes in RED