• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menü mit Ausklappenden Submenü

bodo92

bodo92

Aktives Mitglied
Hallo,
ich bitte um euere Hilfe ich habe jetzt Tagelang nach einer Lösung gesucht aber ich bin einfach zu blöd dafür...

Ich möchte eine Navigation die aus verschiedenen Menüpunkten besteht und bei einzelnen Menüpunkten soll bei "Hover" und bei "Active" das Submenü ausklappen.
Den HTML Quellc. habe ich mir so vorgestellt.
HTML: 
<div class="menu">
   <ul>
      <li><a href="link"><a></li>
      <li><a href="link"><a></li>
      <li><a href="link"><a></li>
         <ul>
            <li><a href="link"><a></li>
            <li><a href="link"><a></li>
         </ul>
      <li><a href="link"><a></li>
   </ul>
</div>

soweit ja kein Problem.

Jetzt habe ich versuckt mir aus irgentwelchen Code-Schnipseln die richtigen CSS Definitionen zu basteln leider völlig vergeblich =(
Code: 
.menu li a:hover {
list-style:none;
text-decoration:none;
display:block;

}

.menu li ul {
list-style:none;
background-color:red;
border-width:1px;
border-style:solid;
display:none;
height:auto;
width:auto;
}

.menu ul li ul {
display:none;
}

.menu ul li:hover ul {
display:block;
}

Ich würde mich freuen wenn ihr mir helfen könnt.
 
Hallo.

Dein HTML ist falsch.

So stimmts:
HTML: 
<div class="menu">
   <ul>
      <li><a href="link"><a></li>
      <li><a href="link"><a></li>
      <li><a href="link"><a>
         <ul>
            <li><a href="link"><a></li>
            <li><a href="link"><a></li>
         </ul>
        </li>
      <li><a href="link"><a></li>
   </ul>
</div>
Gruss
Elroy
 
nicht ganz...sorry elroy.

so vielleicht?
HTML: 
<div class="menu">
   <ul>
      <li><a href="link"></a></li>
      <li><a href="link"></a></li>
      <li><a href="link"></a>
         <ul>
            <li><a href="link"></a></li>
            <li><a href="link"></a></li>
         </ul>
      </li>
      <li><a href="link"></a></li>
   </ul>
</div>
 
@vast

Tut mir leid, aber im Moment steh ich voll auf der Leitung.

Was ist der Unterschied zwischen deinem und meinem Code?

Gruss
Elroy
 
ja, man übersieht es auch recht schnell - die Links werden nicht geschlossen: <a> vs. </a>
 
Ja hast natürlich recht.
Darauf habe ich gar nicht geachtet. Ich habe mich nur auf die Verschachtelung konzentriert.

Gruss
Elroy
 
Aufzählungspunkte etfernen.

Hallo,

vielen dank schonmal für die Hilfe.

Klappt alles (das mit dem <a>#</a> ist mir auch ausversehn passiert is ja klar ;)

Jetz habe ich noch eine Frage ich habe jetzt vor jedem Link ein Aufzählungszeichen also nen "Punkt" stehen. Da habe ich nachgesehen also eigentlich sollte ja mein "list-style:none;" im CSS dafür sorgen das die verschwinden was is da nur los.

---------

Und ich habe im CSS noch eine Definition festgelegt.
Code: 
	.menu ul li:active ul {
	display:block;
	}

soll dafür sorgen das wenn die jetzige seite geöffnet ist das Submenufenster geöffnet bleibt, zeigt jedoch keine reaktion.

Mit freundlichen Grüßen
 
Zuletzt bearbeitet:
Ich fürchte, das mit dem li:active verstehst du nicht ganz richtig.
:active bezeichnet bei links, also <a>-Elementen den Zustand nach dem focus (klick), währen der Ladephase des Link-Ziels.

Leider bedeutet es nicht,dass der Menüpunkt der gerade aktuellen Seite "active" ist.
Oder mit anderen worten, dein html und dein CSS "wissen" nicht, welche Seite aus deinem Menü gerade dargestellt wird.

Die einzige Möglichkeit die mir einfällt, das mit html/css zu machen, wäre in jeder html-Seite zB dem <body> eine id oder Klasse zu verpassen, die die aktive Seite beschreibt.

Wenn zB auf deiner seite1.html der body die ID "seite1" hätte (und seite2 die ID "seite2" etc), könntest du der ul, die den Link zur seite1.html (bis seite3) beinhaltet, eine Klasse wie "seite1bis3" geben.
Im CSS könnte man dann folgendermassen vorgehen:

HTML: 
body#seite1 ul.seite1bis3,
body#seite2 ul.seite1bis3,
body#seite3 ul.seite1bis3 {
   display:block;
}

Somit wird dann auf den Seiten 1-3 das Untermenü, das die Links der aktives Seite beinhaltet, dargestellt.

Alles andere würde javascript oder php benötigen.
Ich hoffe, das war verständlich, wenn jemand eine bessere Lösung in html/css kennt, wird derjenige sich sicher hier äußern.

greetz
 
Okey, ich kann damit leben wenn es nur beim Hover ausklappt.

Kann mir jemand mit dem Problem "Aufzählungszeichen" helfen?
 
versuch mal:
HTML: 
.menu ul li ul {  
  list-style:none;
}
...ansonsten evtl nochmal posten, wie dein html/css jetzt aussieht.
 
Hallo, für das Problem mit den Aufzählungszeichen habe ich eine Lösung gefunden.

Jetz hase ich jedoch gemerkt das das Submenu im Internet Explorer nicht funzt.
 
...ab Version 7 sollte er das eigentlich schaffen, der IE.
Wenn du keinen doctype drin hast, versuchs mal mit diesem:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">

Ansonsten, wie gesagt doch bitte nochmal eine aktualisierte Version deines codes bereitstellen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben