CSS Klappmenü

[hobbywm]

Hallo, leute habe da eine Frage an euch ??

Ich benutze das Hier Das perfekte Menü: Klappmenü: Navigieren in Dimensionen

Nun möchte ich eine ebene Hinzufügen, weiss aber nicht genau wie ich davor gehen soll.

<div id="menu">
    <ul>
    <li><h2>Titel 1</h2>
      <ul>
      <li><a href="#">eins</a></li>
      <li><a href="#">zwei ...</a>
        <ul>
        <li><a href="#">zwei a</a></li>
        <li><a href="#">zwei b</a></li>
        <li><a href="#">zwei c</a></li>
        <li><a href="#">zwei d</a></li>
        </ul>
      </li>
      <li><a href="#">drei ...</a>
        <ul>
        <li><a href="#">drei a</a></li>
        <li><a href="#">drei b ...</a>
          <ul>
          <li><a href="#">drei
    b i</a></li>
          <li><a href="#">drei
    b ii</a></li>
          <li><a href="#">drei
    b iii</a></li>
          </ul>
        </li>
        <li><a href="#">drei c</a></li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
    </div>

Und der css code

#menu { width: 80px; background: #eee; } 

    #menu ul { list-style: none; margin: 0; padding: 0; } 

    #menu a, #menu h2 {
      font: bold 11px/16px arial, helvetica, sans-serif;
      display: block;
      border-width: 1px; border-style: solid; border-color: #ccc #888
    #555 #bbb;
      margin: 0; padding: 2px 3px; }

    #menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase;
    } 

    #menu a { color: #000; background: #efefef; text-decoration: none; } 
#menu li { position: relative; }

    #menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }

    div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;} 

    div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}


    #menu a:hover { color: #a00; background: #fff; }

In der Bescgreinung steht das.
Das Menu beherrscht in der jetztigen Version drei Ebenen. Für jede zusätzlich gewünschte Ebene ist das entsprechendes Selektorenpaar bei display: none und display:block hinzuzufügen.

Ich bekomme es aber nicht hin

 

[Lost]

Hi
ich versuch's dir mal etwas zu erklären, in deinem css Code kommt eine Stelle die sieht so aus:

    div#menu ul ul ul, 
    div#menu ul ul li:hover ul ul {display: none;} 

    div#menu ul ul li:hover ul, 
    div#menu ul ul ul li:hover ul {display: block;}

Diese musst du für jede weitere Unterebene erweitern um jeweils ein "ul" bzw. um ein menu tag siehe hier 3. und 6. Codezeile (ein ul mehr):

    div#menu ul ul ul, 
    div#menu ul ul li:hover ul ul {display: none;} 
    div#menu ul ul li:hover ul ul ul {display: none;} 

    div#menu ul ul li:hover ul, 
    div#menu ul ul ul li:hover ul, 
    div#menu ul ul ul ul li:hover ul {display: block;}

In deinem HTML Code musst du das selbe machen eine neue Unterebene schaffen Bsp.:

<li><a href="#">drei b iii ...</a>
<ul>
<li><a href="#">drei b a</a></li>
<li><a href="#">drei b aa</a></li>
<li><a href="#">drei b aaa</a></li>
</ul>
</li>

Teste das mal, so müsste es funktionieren, fals es nicht funktionieren sollte, kannst du gerne nochmal nachfragen.

mfg Lost

 

[hobbywm]

Ich Danke dir Recht.

Funktioniert einwandfrei.

Die Welt kann manchmal so einfach sein.

 

[hobbywm]

Jetzt habe ich wieder eine Frage ?

Teste schon eine weile bekomme es aber nicht hin.

Ich will das das Menü einen Transparenten hintergrund hat, das ist ja alles kein Problem, nur wenn es dann klappt ist es auch transparent.
Wie muss ich da vorgehen das das Menü beim Klappen eine Hintergrundfarbe hat.

#menum { width: 100%; background: #1a1a1a; }

#menum ul { list-style: none; margin: 0; padding: 0; img border: 0 none; }




#menum a, #menum h2 {
font: bold 11px/16px Tahoma, Verdana, Helvetica, Arial;
display: block;
border-width: 0px; border-style: none; border-color: #1a1a1a #1a1a1a #1a1a1a #1a1a1a;
margin: 0; padding: 2px 3px; }

#menum h2 { color: #fff; background: #1a1a1a; text-transform: uppercase; }

#menum a { color: #fff; background: #1a1a1a; text-decoration: none; }

#menum a:hover { color: #ff0000; background: #1a1a1a; }

#menum li { position: relative; }

#menum ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }

div#menum ul ul ul, div#menum ul ul li:hover ul ul {display: none;}

div#menum ul ul li:hover ul, div#menum ul ul ul li:hover ul {display: block;}

 

[hobbywm]

Habe es hinbekommen.

musste den Background so hinzu fügen

#menum { width: 100%; background: #; }

#menum ul { list-style: none; margin: 0; padding: 0; img border: 0 none; }




#menum a, #menum h2 {
font: bold 11px/16px Tahoma, Verdana, Helvetica, Arial;
display: block;
border-width: 0px; border-style: none; border-color: #1a1a1a #1a1a1a #1a1a1a #1a1a1a;
margin: 0; padding: 2px 3px; }

#menum h2 { color: #fff; background: #; text-transform: uppercase; }

#menum a { color: #fff; background: #; text-decoration: none; }

#menum a:hover { color: #ff0000; background: #; }

#menum li { position: relative; }

#menum ul ul ul {position: absolute; background: #1a1a1a; top: 0; left: 100%; width: 100%; }

div#menum ul ul ul, div#menum ul ul li:hover ul ul {display: none;}

div#menum ul ul li:hover ul, div#menum ul ul ul li:hover ul {display: block;}

 

[Efchen]

Das ist aber kein gültiger CSS-Code. Gib auch eine Farbe an!

 

[monaco.bici]

hallo,

ich habe auch eine Frage zum Thema Klapp-Menü:
DAV Leitzachtal

Funktioniert beim IE super, bei Firefox 3.0.15 verschindet das Untermenü sobald man runter hovert. Kenne mich gut mit HTML und ein wenig mit CSS, für das Menü der Seite hat ein mir jemand eine externe jquery-1.3.2.js Datei empfohlen, die ich ohne Kentnisse so übernommen habe? Soll ich das jetzt besser nur mit CSS machen oder...?

Danke!

P.S. will die Seite dann bei Gelegenheit auf DIV Container umstellen - Tabellen sollen ja "out" sein.

 

[Efchen]

P.S. will die Seite dann bei Gelegenheit auf DIV Container umstellen - Tabellen sollen ja "out" sein.

So ein Quatsch!

Du musst Dich über solche Infos schon richtig informieren.

Weder sind Tabellen out, noch erstellt man eine Website mit div-Containern!

Man erstellt die semantische Grundstruktur einer Webseite mit HTML, da kommen Tabellen vor, wenn man tabellarische Daten auszeichnet. Das Tag <div> dient lediglich zum Gruppieren mehrerer Elemente!

Das Aussehen und Layout macht man komplett über CSS!

Was Du gehört und falsch interpretiert hast ist, dass es falsch ist, Layout mit Tabellen zu machen. Es ist aber genauso falsch, Layout mit div Containern zu machen!

Mir ist bewust, dass der Thread schon alt ist und Deine Antwort auch schon ein bisschen her, aber ich hoffe, dass Du Mail-Benachrichtigung eingestellt hast und diese Antwort dennoch liest, damit Du nicht auf dem Holzweg unterwegs bist und von einr falschen Anwendung von HTML in die nächste falsche Anwendung schlitterst, ohne jemals verstanden zu haben, was HTML ist.

Suche mal nach "Semantik", da findest Du sicher etliche Beiträge. Wenn dann noch Fragen sind, mach einen eigenen Thread auf und frage, was das Zeug hält!

Liebe Grüße,
-Efchen