CSS

I usually work with list menu's for the sites I develop.
Now I had a site that was made with a crappy typo3 menu.
I had to copy the design and use it with my cms.
So I thought "Hey I just use my list menu, mwuahaha".
But now I have a hover/margin problem. Firefox displays everything correct, but in IE the margin-bottom disappears when I hover over an item that has a submenu (another UL).
The link is: <>
Thanks in advance

[edited by: SuzyUK at 1:08 pm (utc) on Mar. 11, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

sorry about the link thing.. IE does have some problems with lists at timesd (what doesn't it have problems with hehe)

if possible could you isolate a small example of your menu (we don't need all the options) which shows the missing margin and post it here along with the relevant CSS, it may be easier for someone to spot that way

thanks
-Suzy

In this example the problem should appear if you hover over "Producten - Modellen" (margin-bottom disappears)
The relevant IE stylesheet:

/**********************************************
List menu
***********************************************/

ul#menue, ul#menue ul
{
list-style-type:none;
padding:0;
margin:0;
font:11px Arial;
z-index:100;
}

ul#menue {
width:242px;
}

ul#menue li
{
margin: 0;
text-align: left;
/*background: #013262;
color:#FFF;*/
text-decoration:none;
line-height:20px;
height:20px;
padding-left:5px;
border:none;
}

ul#menue li:hover {
margin: 0;
text-align: left;
/*background-color: #0352A2;*/
text-decoration:none;
line-height:20px;
height:20px;
padding-left:5px;
border:none;
}

ul#menue li a
{
/*color:#FFF;
background:#013262;*/
text-decoration:none;
display:block;
}

ul#menue li a:hover {
/*background-color: #0352A2;*/
text-decoration:none;
display:block;
}

ul#menue li > ul
{
position:relative;
left:+242px;
top:-25px;
display:none;
}

ul#menue li:hover > ul
{
display:block;
}

ul#menue li ul
{
margin-top:5px;
margin-left:-6px;
/*background: #013262;*/
min-width:100px;
width:auto;
}

ul#menue li ul li {
width:auto;
margin-bottom:0px;
text-align:left;
padding-left: 10px;
}

ul#menue li ul li:hover {
/*background-color: inherit;*/
padding-left: 10px;
margin-bottom:0px;
}

ul#menue li ul li a
{
/*color:#0352A2;
background:#FFF;*/
text-decoration:none;
display:block;
padding-left:25px;
}

ul#menue li ul li a:hover {
/*background-color: #0352A2;
color: #FFF;*/
}

ul#menue li ul li ul
{
margin-top:5px;
margin-left:-19px;
background: none;
}

ul#menue li ul li ul li{
width:auto;
text-align:left;
background:none;
margin:0;
}

ul#menue li ul li ul li:first-child {
width:auto;
text-align:left;
background:none;
margin:0;
}

ul#menue li ul li ul li:hover{
width:auto;
text-align:left;
background:none;
margin:0;
}

ul#menue li ul li ul li a
{
/*color:#0352A2;
background:#FFF;*/
text-decoration:none;
display:block;
}


Sorry for the massive css code. But I included all available item definitions so the items are not overwritten by other code.
I see I forgot the css for the colors, I will add them in a few moments

I also set up a page on my dev with this config. Just for test.
Can I link that, Suzy?