drop-down-menü Überlappungsfehler

[XDClaner]

Ich muss für eine Facharbeit eine Internetseite gestalten, das habe ich auch ganz gut hingekriegt. Jetzt wollte ich nur noch ein pull-down-menü machen...

Allerdings entsteht bei meinem Menü eine überlappung der unterpunkte, trotz left: 0 und top:100%...
Also habe ich dem untergeordneten ul-element ein margin: 2px zugewiesen.
Aber anscheinend verändert sich die Höhe dynamisch, sodass bei einer seite mit wenig inhalt sowas passiert:

am liebsten wäre es mir natürlich, wenn mir jemand sagen kann, warum es mit dem top: 100% nicht klappt (da überlappt es sich um 1 px), aber es wäre echt toll, wenn ihr überhaupt eine Lösung finden würdet...

mfg XDClaner

p.s. mein Code:

  
/* Copyright 2011 */  
  
html, body {  
            margin: 0px;  
            padding: 0px;  
            font-family: Arial;  
            background: url(../Pics/background.png);  
        }  
  
        #container {  
            padding: 50px 200px;  
            position: static;  
        }  
  
        #header {  
            position: static;  
        }  
  
        #mainnav {  
            position: static;  
        }  
  
            #mainnav ul {  
                margin: 0px;  
                padding: 2px 0px;  
                width: 100%;  
            }  
  
            #mainnav > ul {  
                background: url(../Pics/navi_background.png) repeat-x;  
                padding: 5px 0px;  
            }  
  
            #mainnav ul li {  
                display: inline;  
                position: relative;  
                background: url(../Pics/navi_background.png) repeat-x;  
                padding: 5px 15px;  
            }  
  
            #mainnav ul li ul {  
                display: none;  
            }  
  
            #mainnav ul li ul li {  
                display: block;  
            }  
  
  
            #mainnav ul li:hover ul {  
                display: block;  
                position: absolute;  
                left: 0px;  
                top: 100%;  
            }  
  
            #mainnav li:hover {  
                background: url(../Pics/navi_background_hover.png) repeat-x;  
            }  
  
            #mainnav a {  
                text-decoration: none;  
                color: black;  
                font-weight: bold;  
            }  
  
            #mainnav a:hover {  
                text-decoration: none;  
                color: #CFCFCF;  
            }  
  
        #content {  
            padding: 70px;  
            padding-top: 30px;  
            padding-bottom: 10px;  
            position: static;  
            background: #FFFFFF;  
            -moz-border-radius-bottomleft: 20px;  
            -moz-border-radius-bottomright: 20px;  
            -webkit-border-radius-bottomleft: 20px;  
            -webkit-border-radius-bottomright: 20px;  
            -khtml-border-radius-bottomleft: 20px;  
            -khtml-border-radius-bottomright: 20px;  
        }  
  
        #footer {  
            font-size: 75%;  
            clear:left;  
            text-align:center;  
            padding:10px;  
            width: 100%;  
            border-top: solid black 1px;  
            margin-top: 15px;  
        }  

[Matthias Apsel]

Om nah hoo pez nyeetz, XDClaner!

Online-Beispiele haben den Vorteil, dass man keine cnp-Orgie starten muss[1], die zudem in deinem Fall nichts bringt, weil CSS ohne das HTML auf das es angewendet werden soll, wertlos ist.

[1] siehe Zitatesammlung

Matthias