… mit drop down elementen in Html und CSS?
Kann mir jemand den einfachsten Code für eine Horizontale Navi mit Drop down Unternavi Elementen geben?
Habe das Netz durchforstet, alle welche ich fand sind so kompliziert beschrieben.
Bin Anfänger, weiss jetzt dass die horizonalen Navi listenpunkte mit positio relativ und die unterpunkte mit position absolut versehen werden sollen, aber ich komme nicht weiter… Kannst Du mir helfen?
Hallo,
wäre sinnvoll zu wissen, was genau Du nicht verstehst. Wenn Du eine ungeordnete, mehrstufige Liste hast und im CSS folgendes schreibst (Auszug):
li {
position: relative;
display: inline;
}
li ul {
position: absolute;
display: none;
}
li:hover ul{
display: block;
width: 200px;
}
li li {
display: block;
}
… hast Du schonmal ein Grundgerüst. Erklärung: "Unter"listen, also Submenüs werden nicht angezeigt, bis man über deren Elternelement hovert.
Gruß mmd
Hallo mmd!
Vielen Dank für deine schnelle Hilfe 
Ich werde es gleich ausprobieren!
Ein fröhliches neues Jahr 2011 wünsche ich dir.
lieben Gruß vvb
Hallo made my day,
autsch…jetzt kann ich beschreiben wo mein verständnis fehler liegt/lag:
die richtigen css anweisungen, von dir behoben:smile:
sobald ich mit der maus über den menüpunkt fahre welcher submenues beinhaltet, sprengen diese die main navi auseinander. plötzlich rutscht der rest der hauptnavi runter, neben die submenue punkte.
die submenue punkte liegen alle übereinander und ich bekomme sie nicht untereinander positioniert, bzw direkt unter dem betreffenen main menuepunkt…
gibt es für punkt 2 und 3 besondere anweisungen?
bei punkt 2 kann ich mir vorstellen dass es einen befehl geben wird, welcher dem submenue erlaubt "über die mainpunkte „rüber zu springen, ohne diese zu beeinträchtigen…?“
bei punkt 3. überlege ich, wenn ich den jeweiligen submenues classen gäbe und sie einzeln positioniere, dann geht es vielleicht, aber wie das geht, weiss ich eben auch nicht so richtig, habe es versucht und sie überlappen einander, so dass nur einer dieser punkte auswählbar bleibt…
Kannst du mir hierbei noch einmal helfen?
lieben gruß vivien
Hi Vivien,
Code sagt mehr als tausend Worte: http://siebennull.com/tests/menu.html
Bei Fragen einfach fragen.
Grüße
Marc (mmd)
Danke mein Retter
(hüpf, freu)
Also das mit position brauchst du nicht umbedingt, schon gar nicht in der reihenfolge.
hallo xaver,
ich danke dir für diesen tipp!
frohes neues jahr für dich 
lg vvb
Hallo vvb,
wenn du eine neuere Version Dreamweaver verwendest, kannst du auf recht einfache Weise ein Dropdown Menü erstellen (Einfügen>Spry>Spry-Menüleiste). In den Eigenschaften kannst du einfach Punkte hinzufügen oder entfernen.
Hast du nicht den DW, geht das auch mit CSS und etwas Mühe. Folgendes wird in jede HTML-Seite eingefügt:
Punkt 1
Punkt 1.1
Punkt 1.2
Punkt 1.3
Punkt 2
Punkt 2.1
Punkt 2.2
Punkt 2.3
Da der Internet Explorer meist sein eigenes Süppchen kocht, benötigt er eine Extraeinladung:
Folgendes gehört in die CSS-Datei:
/*
Menue-styles fuer non-IEs
Achtung:
Fuer non-IEs gilt das Stylesheet ‚dropdown.css‘!
Fuer IE gilt das Stylesheet ‚fix-ie.css‘ (per CC)!
*/
#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}
a.drop-1 {
margin-top: 2px;
}
a.drop,
a.drop-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.drop,
a:visited.drop-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.drop,
a:hover.drop-1 {
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}
/*
Menue-styles fuer IEs
Am besten per Conditional Comment einbinden.
Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
Anpassungen vorgenommen werden (siehe Kommentare).
*/
#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}
a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}
a.drp {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst ‚zuckt‘ es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.drp {
background-color: #ecd8ae;
color:#444;
}
a:hover.drp {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.haupt {
display: block;
cursor: default;
}
Farben und Größen kannst du natürlich selbst anpassen, musst aber darauf achten, dass du sie dann auch entsprechend im IE-Hack änderst.
Die „Lorbeeren“ gehen übrigens an folgende Seite http://barrierefrei.e-workers.de/workshops/tricks/me….
Ich habe das Menü nur etwas gekürzt und für meine Bedürfnisse angepasst.
Viel Erfolg,
Jormungand
Hallo Jormungand,
herzlichen Dank für deine Hilfe !
Ja, ich habe DW, da werde ich gleich mal nachschauen ob ich es finde.
Und deine Mühe, mir den kompletten Code etc zu senden, finde ich sehr sehr hilfsbereit!
Ich wünsche Dir einen guten gesunden Rutsch in das neue Jahr 2011 !
Lieben Gruß
vvb
Hi vvb,
Du meinst wohl sowas hier:
http://de.selfhtml.org/css/layouts/anzeige/nav_moder…
Wenn Du unten auf „zurück“ klickst, erhältst Du den Code.
Das ist imho die einfachste Lösung für so eine Navigation.
Falls Du noch Fragen hast: immer her damit.
Schönen Gruß!
Michael
Hallo Michael,ich danke dir !
ich probiers mal aus
wünsche dir einen guten rutsch ins neue jahr!
lg vvb