Question

I have a vertical drop-down menu that is working fairly well. I have one bug that I cannot get a handle on, though.

You can find my menu here: test Page

The menu works fine in internet explorer (except for a little drop on the first submenu, that I can live with (bonus points if you know what that’s about), but in other browsers, my background flows from the submenu back to the main menu. Where the “margin” is coming from?

so far I’ve found that it has something to do with how I’ve styled my li:hover children

Potentially useful snippets from my CSS

ul#menu3{
display:block;
left:20px;
margin:0;
width:10em;
padding:0;
position:absolute;
list-style:none;
}
ul#menu3 li{
color:#000000;/*
float:left;*/
position:relative;
margin:0;/*
margin-bottom:-1px;*/
line-height:31px;
text-align:center;
width:10em;
padding:0;
font-weight:bold;
display:block;
vertical-align:middle;
background-image:url(../../../menu4/awmdata/button-tile.gif);
}
ul#menu3 li:hover ul{
text-align:center;
vertical-align:bottom;
background-image:url(../../../menu4/awmdata/button-tile.gif);
background-repeat:repeat;
left:auto;
margin-top:-31px;
}
ul#menu3 li ul{
position:absolute;
left:-999em;
margin-left:10em;
margin-top:-31px;
}
ul#menu3 li ul li{
color:#000000;
margin:0;
left:auto;
padding:0;
font-weight:bold;
}

Answer 1

Stick this at the top of your styles.css

ul, li {
    margin: 0;
    padding: 0;
}

When using unordered lists for menu’s it’s always a good idea to remove the margin and padding so you have better control with your layout from the start