Horizontal dropdown menu with columns (IE problem)

[Babo]

Would like help or advice on how to fix this menu. It looks perfectly fine in Firefox but in IE.... the dropdown aligns itself to the right of each menu item.

http://www.siwat.org/portfolio/thaifinehome/menubar2.html

Apologies in advance for the CSS mess I'm quite a noob :(



/* Start Menu Bar */

ul.nav,
.nav ul
{
margin:0px;
padding:7px;
cursor:default;
list-style-type:none;
display:inline;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
}

ul.nav
{
display:block;
width:100%;
}
ul.nav>li
{
display:block;
float:left;
position:relative;
padding:2px 10px;
}
/*Hide drop down*/
ul.nav li>ul
{
display:none;
position:absolute;
margin-left:2px;
margin-top:2px;
}
/*Show drop down*/
ul.nav li:hover>ul
{
display:block;
position:absolute;
background-image:url(../images/tfh_dropdown.png);
background-repeat:no-repeat;
background-position:bottom right;
}

/*List highlight*/
.nav ul li a
{
display:block;
padding:5px;
}

/*Menu colours*/

ul.nav,
.nav ul,
.nav ul li a
{
background-color:#000916;
color:#fff;
}


ul.nav li:hover,
.nav ul li a:hover
{
background-color:#1a3864;
color:#fff;
}

ul.nav li:active,
.nav ul li a:active
{
background-color:#1a3864;
color:#fff;
}
.submenu
{
color:#c1d0e3;
}
.menutitle
{
font-size:12px;
}
ul
{
float:left;
list-style:none;
}
ul li
{
display:block;
}
ul li ul li
{
display:block;
}
li
{
margin:5px;
line-height:15px;
position:relative; /* For IE */
}
/*Columns*/
.column1
{
margin-left:15px;
width:130px;
}
.column2
{
margin-left:150px;
width:130px;
}
.column3 {
margin-left:305px;
width:200px;
}
.column_align1
{
margin-top:-120px;
}
.column4
{
margin-left:15px;
width:130px;
}
.column5
{
margin-left:150px;
width:130px;
}
.column_align2 {
margin-top:-80px;
}

[rangana]

See if changing your CSS:


ul.nav li>ul{
/*Make the sub list items invisible*/
display:none;
position:absolute;
/*max-width:40ex;*/
margin-left:2px;
margin-top:2px;
}


to:


ul.nav li>ul{
/*Make the sub list items invisible*/
display:none;
position:absolute;
/*max-width:40ex;*/
left:0px;
top:20px;
}


proves an aide.

P.S. When parsing your code in the forum, use the
tag and not the
tag.

[Babo]

Thanks :), tried meddling with that, ended up making 2 CSS files, 1 for IE6+ but was only able to properly align the 1st dropdown into the position I want. The other 2 dropdowns went a bit too far to the left so I changed the column list margins slightly to look more presentable. Would show results but in the middle of uploading to new webhost.

For Firefox

ul.nav li>ul{
display:none;
position:absolute;
margin-left:-10px;
margin-top:2px;
}

IE7(no idea how it looks like in IE6 or below!)

ul.nav li>ul{
display:none;
position:absolute;
margin-left:-142px;
margin-top:17px;
}