Navigationsmenü funktioniert nicht!

[Hansii]

Hallo.

Habe folgenden Navigations-Code:

HTML:

<div id="navi">
    <ul>
        <li class="top_menu"><a href="">Home</a></li>
        <li class="top_menu"><a href="">Allgemein</a>
            <ul>
                <li class="sub_menu"><a href="">Private Nachrichten</a></li>
            </ul>
        </li>
        <li class="top_menu"><a href="">Benutzer</a>
            <ul>
                <li class="sub_menu"><a href="">Übersicht</a></li>
                <li class="sub_menu"><a href="">Neuer Benutzer</a></li>
            </ul>
        </li>
        <li class="top_menu"><a href="">Content</a>
            <ul>
                <li class="sub_menu"><a href="">Header</a></li>
                <li class="sub_menu"><a href="">Navigation</a></li>
                <li class="sub_menu"><a href="">Footer</a></li>
            </ul>
        </li>
        <li class="top_menu"><a href="">Plugins</a></li>
        <li class="top_menu"><a href="">Sicherheit</a></li>
        <li class="top_menu"><a href="">Statistiken</a></li>
        <li class="top_menu"><a href="">Logout</a></li>
    </ul>
</div>

CSS:

#navi{
    font-size: 14px;
    position: absolute;
    height: 30px;
    background-color: #777;
    width: 1000px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#navi ul{
    list-style-type: none;
    list-style-image: none;
    margin: 0px;
    padding: 0px;
    margin-left: 20px;
}

#navi li.top_menu{
    float: left;
}

.top_menu a{
    float: left;
    width: 110px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.top_menu ul{
    display: none;
}

.top_menu a,.sub_menu a{
    padding: 1px 5px;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    background-color: #777;
}

.sub_menu a{
    font-size: 12px;
    width: 110px;
    position: relative;
    clear: both;
}

#navi a:hover,.top_menu.on a{
    color: #000;
    background-color: #AAA !important;
}

.top_menu:hover ul{
    display: block;
    z-index: 500;
}

Soweit ist die Navigation auch schon in Ordnung, allerdings bekomme ich es nicht hin, die Unterpunkte direkt unter dem Hauptpunkt zu platzieren. Wenn man z.B. Benutzer hovert, sollen direkt darunter (nicht links eingeschoben !!!) die Punkte Übersicht und Neuer Benutzer erscheinen. Außerdem verschiebt sich der Menüpunkt (Logout) soweit, dass man die Rundung nicht sieht, aber nur wenn man hovert !!

Hier ein Screen:

 

[Hansii]

Joa, habs doch geschafft :);)