Dropdown Menü Problem

[12Kukan]

Hallo Leute,

ich habe ein Problem mit meinen Dropdownmenü. Undzwar will ich, dass mein Menü runter "droppt" und nicht zur Seite. Den mein Menü "droppt" zur Seite. Ich habe nicht so viel Erfahrung mit hover und deswegen frage ich. Wie bekomme ich ein Dropdownmenü hin, dass runter "droppt" ??
Hier ist der Code:

nav ul {
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-right: 40px;
    background-color: #808080;
    font-weight: bold;
    cursor: default;
    padding: 0 20px;
}

nav {
    color: #FFFFFF;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #808080;
    margin-top: inherit;
    text-align: center;
    border-top: ridge;
    border-bottom: ridge;
    border-left: ridge;
    border-right: ridge;
    padding-bottom: 100px;
}

nav a {
    padding-right: 50px;
    padding-left: 50px;
    text-align: center;
    text-decoration: none;
    color: white;
    text-shadow: black 1px 1px 4px;

}

nav li:hover {
    background-color: #808080;
}

nav a:hover {
    color: white;
    text-shadow: none;
}

nav li:hover ul {
    display: block
}

nav ul ul li:hover {
    background: #f00;
}

nav ul ul {
    position: absolute;
    margin-left: -20px;
    display: none;
}

nav ul ul li {
    float: none;
    margin: 0;
    background: #d00;
    height: 30px;
}

Viele Grüße,

Kukan

 

[phzu]

Hallo!

Wie soll den dein Menue aufklappen?

Willst du es mit CSS oder JavaScript machen? Kann dir aus persoenlicher Erfahrung empfehlen es mit JQuery zu machen. Dazu gibt es Tutorials wie Sand am Meer...

Falls du es mit CSS machen willst, solltest du irgendwo bei :hover angeben dass etwas angezeigt werden soll..

Hoffe ich konnte helfen...

 

[threadi]

Das hat nichts mit hover sondern mit den von dir angegebenen Eigenschaften zu tun. In diesem Fall hast Du für

nav ul ul {

also das Aufklappmenü zwar eine absolute Positionierung angegeben, aber keine Richtung definiert.

Wenn das Menü nach rechts ausklappen soll, müsstest Du noch

left: 0;

ergänzen.

Wenn das Menü nach unten ausklappen soll, müsstest Du noch

top: 0;

angeben.

Moderation: Verschoben von HTML zu CSS - bitte künftig darauf achten zu welchem Themenbereich du etwas eröffnest. Danke.