How can I eliminate phantom margins in my dropdown menu?


Tags: background-image,css-float,css

Problem :

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;
}


Solution :

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


    CSS Howto..

    How to put text on the center of a circle using CSS

    how to set a path to the static files which is surver independnet

    How to resize all div images to a particular size?

    How to do Vertical+Horizontal centering in CSS

    how to align editor-label with editor-field in css

    How to hide overflow characters of a div when resizing [duplicate]

    How to stop a CSS rule from applying to a specific element [duplicate]

    how to move this navigation bar to the right

    How to do drop-down box like “More action” in gmail

    How to inscribe the following shape with CSS inside div?

    How do you apply diferent colors from diferent css rules to the same object?

    How to apply a property only to the submit button

    How can Shake FilePatterns be used to minify JS and CSS files?

    How to control a

    Python: How to override text area in form using CSS

    How do I apply a css padding to one element but not its child

    How to use pure css selector to select hidden element

    How do I use PHP to apply css properties? [closed]

    How to animate top % after a delay?

    How to Generate All Possible CSS 2 Selector Combinations?

    how to insert css into html for blogger gadget

    How to sort properties in CSS file by groups?

    jQuery select- How to change the css style select?

    CSS: How to flow text around both left and right images

    how to make css dropdown menu a dropup menu

    Bootstrap: how to clear images in a gallery?

    How to vertical align element relative other element with pseudo-class? [duplicate]

    How To Add % Based Image To CSS? (for fluid layout)

    Box-shadow is overlapping other elements, how can I fix it?

    Rails - how to build a grid-like list of product page