drop-down Navigation

[RonjaWork]

Hallo zusammen,

Ich habe versucht Probeweise eine Drop-Down Navigation zu programmieren. Hier mein Code:

.navi {
    list-style: none;
    margin: 0px 25px 0px 0px;
    display: inline;
    line-height:36px;
}
#navi ul {
    margin: 0 0 0 -15px;
    list-style-image: none;
    list-style-type: none;
}
#navi a {
    text-decoration: none; font-weight: bold;
    color: #ffffff;
}
#navi a:hover {
    color: #cccccc;
}

.submenu{
    display:none;
}
.navi:hover .submenu{
    display:inline;
    position:absolute;
    z-index:2;
    margin-left:1px;
}
.navi:hover .submenu li{
    display:block;
    background-color:#944C4C;
    list-style:none;
    padding: 0px 10px 0px 10px;
}

<div id="navi">
                <ul>
                <li class="navi"><a href="index.html" title="Zurück zur Startseite">Home</a></li>
                <li class="navi"><a href="#" title="#">Navipunkt</a>
                    <ul class="submenu">
                    <li><a href="#" title="#">Unterpunkt</a></li>
                    <li><a href="#" title="#">Unterpunkt eins</a></li>
                    </ul></li>
                <li class="navi"><a href="#" title="#">Navipunkt</a></li>
                <li class="navi"><a href="#" title="#">Navipunkt</a></li>
                <li class="navi"><a href="#" title="Kontakt">Kontakt</a></li>
                <li class="navi"><a href="#" title="Impressum">Impressum</a></li>
                </ul>
            </div>

Das Submenü wird jetzt aber leider rechts neben dem Navipunkt angezeigt und nicht darunter. Es soll eigentlich so sein, wie auch hier bei psd-tutorials.
Was muss ich ändern, um das zu erreichen?

LG, Ronja

 

[RonjaWork]

AW: drop-down Navigation

Habe es selber hinbekommen. Habe anstatt display: inline display: block genommen. Macht ja auch Sinn...

.navi:hover .submenu{
    display:block;
    position:absolute;
    margin-left:1px;
}