Probleme mit Dropdown Menü

Hallo,

bin gerade dabei meine Seite ein bisschen zu überarbeiten…
Unter anderem soll auch ein neues Menü her… Es soll ein horizontales Dropdown-Menü werden.
Das Menü funktioniert soweit auch ganz gut (stammt von css.maxdesign.com), allerdings scheitere ich an einem weiteren dropdown…

Ich schaffe es einfach nicht, dass bei “Item two” ein weiteres dropdown erscheint…
Kann mir jemand helfen?

http://simsonundco.bplaced.net/probe.html

[code]

#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #036;
color: #FFF;
width: 100%;
font: normal 110% arial, helvetica, sans-serif;
text-align: left;
z-index:2;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: #036;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover
{
background-color: #369;
color: #fff;
}

ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
width:100px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }

[/code]

Vielen Dank im vorraus

Gruß simsonundco

[code]

  • Item two
  • [/code]Wenns mich nicht täuscht ist da ein zuviel? :wink:

    Auweia :smiley: das ist mir ja jetzt peinlich…
    Genau daran lag es… - Das kommt davon wenn man immer bis spät in die Nacht hinein bastelt…

    Vielen Dank!

    Gruß simsonundco

    Das kommt davon, wenn man sein HTML nicht validiert …

    Aufgrund der eingeschränkten Möglichkeiten der DTDs verrät
    einem der Validator allerdings auch nicht, daß es dann nach
    Behebung des Strukturfehlers auch nicht sinnvoll ist, a und ul
    als gemeinsame Kindelemente von li zu haben. Zu ul paßt ein
    andere Blockelement wie eine Überschrift h?, p oder div, wo man
    dann das a reinstecken sollte…

    Oder sofern das a wirklich irgendsowas wie ein Begriff
    werden soll, welcher die ul-Liste repräsentiert, könnte man
    stattdessen auch eine Definitionsliste verwenden, da gibt es
    ja zwei Listenpunkte td und dd, paßt dann inhaltlich auch
    halbwegs, wenn die Liste den Begriff näher definiert und man
    eine andere, flachere Struktur für sinnvoller hält.

    Asche über mein Haupt :wink:

    Ich habe mal noch eine Frage…
    Stehe noch ziemlich am Anfang mit CSS und nun komme ich schon wieder nicht weiter…
    Versuche jetzt schon seit Stunden das Dropdown jeweils passend zu positionieren, aber es gelingt mir einfach nicht. Wie schaffe ich es, dass das zweite Dropdown bei “Item Two” sich auch darunter befindet?

    Gruß simsonundco

    Ich habe zumindest gerade gesehen, daß du den
    Fragmentidentifizierer ‘subnavlist’ zweimal vergeben hast, solch
    ein grober Fehler kann eigenartige Folgen haben - im besten
    Falle wird einer davon ignoriert. Dann wirken die Anweisungen
    auch nicht auf beide. Andere Auswirkungen auch auf das CSS
    sind möglich und können je nach browser ganz verschieden sein,
    als eines der id-Attribute streichen.

    Sofern jedenfalls keine Positionierung auf ein Element wirkt, wird
    es im normalen Textfluß angezeigt, bei einem Blockelement
    einfach unter dem vorherigen nicht positionierten. Insofern
    müßtest du nur die Positionierungseigenschaften für das Element
    entsorgen, gegebenenfalls auch explizite oder implizierte
    Angaben zu margin und padding, falls es sich um eine Einrückung
    handelt - bei Listenpunkten kann auch list-style-position: inside
    was bringen.
    Da hilft es einem oft, wenn man mittels border oder outline
    provisorisch einen Rahmen um Element zieht, um beurteilen zu
    können, wo das Element wirklich ist und wo gegebenenfalls ein
    Seitenabstand etc …

    Hallo hoffmann,

    vielen Dank für Deinen Antwort!

    Meinst Du mit doppeltem Fragmentieridentifizierer die Angabe “subnavlist” im HTML Code weiter unten? Habe den einen jetzt mal entfernt, aber wie soll ich dann ein weiteres Dropdown erzeugen - hatte vorhin schon ein zweites Dropdown mit “subnavlist2” versucht zu bauen, aber das hat leider auch nicht geklappt…

    list-style-position: inside hat leider auch nicht funktioniert…

    Das Dropdown unter “Item One” funktioniert ja auch tadellos und lässt sich ohne Probleme platzieren, aber beim nächsten hapert es dann…

    Gruß simsonundco

    Bei meinem DropDownMenü habe ich eine wenig von peterkroener.de/drop-down-me … avascript/ abgeschaut. Ansonsten wenns dir hilft kannst auch mein nicht so sauber geschriebenes Kopieren unter seoson.bplaced.net .

    Hallo Seoson,

    vielen Dank für Dein Angebot, aber ehrlich gesagt würde ich gerne meins zum laufen bringen, weil es ja auch schon eingebaut und angepasst wurde… Es besteht ja bloß das Ausrichtungsproblem des Dropdown Menüs - ansonsten funktioniert ja alles…

    Gruß schwalbenraser-007

    Wenn du eine Klasse von Elementen hast, denen du die gleichen
    Eigenschaften geben willst, so verwendest du bei den jeweiligen
    Elementen das Attribut class mit der Angabe des jeweiligen
    Klassennames und kein Attribut id.

    Ansonsten empfiehlt es sich, bei solchen Detailfragen ein
    minimales Testbeispiel hochzuladen und die URI davon hier
    anzugeben, so daß Leute, die sich mit dem Problem beschäftigen
    wollen, sich das direkt angucken können, statt selbst erstmal
    was zusammenbasteln zu müssen.

    Minimales Testbeispiel bedeutet in dem Zusammenhang, es
    sollte nicht mehr drinstehen, als notwendig ist, um das
    Problem darzustellen, es sollte aber korrektes (X)HTML und CSS
    enthalten und ein komplettes Dokument sein. Das relevante CSS
    dann am besten bei dem Testbeispiel oben im Kopf im Element
    style, damit man sich den Quelltext in einem Dokument
    angucken kann.

    Zudem, bei der Reduktion auf ein Testbeispiel fällt einem oft auch
    selber auf, an welcher Eigenschaft das Problem hängt und kann
    das Problem dann häufig selber lösen, was bei einem einfachen
    Beispiel besser funktioniert als an einem großen Dokument mit
    vielen CSS-Angaben, die man analysieren muß, um hinter das
    Problem zu kommen.

    Hallo Hoffmann,

    danke Dir für Deine Ausführungen - aber leider funktioniert es auch mit ‘class’ nicht…

    Habe jetzt noch mal alles in eine Datei gepackt und hochgeladen:

    http://simsonundco.bplaced.net/probe5.html

    Vielen Dank und viele Grüße
    simsonundco

    Die Fehler mußt du jedenfalls beheben, bevor du den Kram
    hochlädst. Neben dem genannten mit dem doppelten id-Wert
    ist auch style falsch gesetzt, das gehört in head und nicht in body.

    Klassen spricht man in CSS für (X)HTML dann mit ‘.’ und nicht mit
    ’#’ an, also z.B. statt ul#subnavlist dann ul.subnavlist für

      Kann auch sein, daß man dann die Selektoren mit :hover etwas
      spezifischer machen muß, damit nicht gleich alles aufgeht.

      Bei Opera jedenfalls sehe ich keine falsche Position, sondern
      es wird da offenbar immer ul#subnavlist { display: none; }
      angwendet, liegt vermutlich am genannten Fehler.

    Hey hoffmann,

    habe alle Deine Hinweise beachtet und den Code entsprechend verändert. Jetzt gibt es allerdings gar kein Dropdown mehr…

    Gruß simsonundco

    Also die Fehler solltest du schon beseitigen und die Umsortierung
    in Klassen beim CSS konsequent anwenden, z.B. dies hier
    funktioniert bei mir:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
    <title> Problem mit der Navigation </title>
    
    <style type="text/css">
    
    #navcontainer ul
    {
    padding: .2em 0;
    margin: 0;
    list-style-type: none;
    list-style-position: inside;
    background-color: #036;
    color: #FFF;
    width: 100%;
    font-family: arial, helvetica, sans-serif;
    text-align: left;
    }
    
    ul#navlist > li {display: inline; margin: 0; padding: 0; position: relative;}
    
    ul#navlist > li > div {display: inline}
    
    ul#navlist li a
    {
    text-decoration: none;
    color: #FFF;
    padding: .2em 1em;
    border-right: 1px solid #fff;
    }
    
    ul#navlist li a:hover
    {
    background-color: #369;
    color: #fff;
    }
    
    
    ul.subnavlist  {display: none;}
    
    ul.subnavlist li a
    {
    padding: 0px;
    margin: 0px;
    }
    
    
    ul#navlist li:hover ul.subnavlist
    {
    display: block;
    position: absolute;
    left: 0px;
    padding-top: 5px;
    width:10em;
    outline: thin solid #ffa
    }
    
    ul#navlist li:hover ul.subnavlist li a
    {
    display: block;
    border: none;
    padding: 2px;
    }
    
    ul#navlist li:hover ul.subnavlist li a:before { content: " >> "; }
    
    </style>
    </head>
    
    <body>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li><div><a href="#navlist">Item one</a></div><ul class="subnavlist">
        <li><a href="#navlist">Subitem one</a></li>
        <li><a href="#navlist">Subitem two</a></li>
        <li><a href="#navlist">Subitem three</a></li>
        <li><a href="#navlist">Subitem four</a></li>
      </ul></li>
    <li><div><a href="#navlist">Item two</a></div><ul class="subnavlist">
       <li><a href="#navlist">test</a></li>
       <li><a href="#navlist">Subitem two</a></li>
       <li><a href="#navlist">Subitem three</a></li>
       <li><a href="#navlist">Subitem four</a></li>
       </ul></li>
    <li><div><a href="#navlist">Item three</a></div><ul class="subnavlist">
       <li><a href="#navlist">test</a></li>
       <li><a href="#navlist">Subitem two</a></li>
       <li><a href="#navlist">Subitem three</a></li>
       <li><a href="#">Subitem four</a></li>
       </ul></li>
    <li><div><a href="#navlist">Item four</a></div><ul class="subnavlist">
       <li><a href="#navlist">test</a></li>
       <li><a href="#navlist">Subitem two</a></li>
       <li><a href="#navlist">Subitem three</a></li>
       <li><a href="#navlist">Subitem four</a></li>
       </ul></li>
    </ul>
    </div>
    
    </body>
    </html>

    Hey hoffmann,

    vielen, vielen Dank! Genau so sollte es immer sein!
    Werde dann mal versuchen das einzubauen…

    Vielen Dank noch mal!

    Gruß simsonundco