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

Probleme mit Navigation

E

emotioncatcher

Neues Mitglied
Hallo,

ich mache gerade eine neue website und hänge bereits an der Navigationsleiste fest.
Sie soll horizontal ausgerichtet sein (hat geklappt), das Untermenü jedoch vertikal und nur beim drüberfahren erscheinen.
Einblenden, wenn die Maus drauf ist funktioniert auch.

Einziges Problem also: Das Untermenü ist nicht vertikal, also nicht ein neuer Menüpunkt in einer neuen Zeile, sondern alle Unterpunkte sind in der selben Zeile
und auch noch übereinandergeschrieben...

Hoffe mir kann jemand (mit einer möglichst einfach erklärten Beschreibung ^^) helfen.

Danke schon mal!


Hier mein html Code der Liste:


<ul id="navi1">
<li><a href="home.html">HOME</a></li>
<li><a href="kurse.html">KURSE</a>
<ul> <li><a href="termine.html">TERMINE</a></li>
<li><a href="preise.html">PREISE</a></li>
<li><a href="extras.html">EXTRAS</a></li>
</ul></li>
<li><a href="trainer.html">TRAINER</a></li>
<li><a href="gallerie.html">GALLERIE</a></li>
<li><a href="links.html">LINKS</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
</ul>



Und CSS:


ul#navi1 { margin: 0; padding: 0; }


ul#navi1 li {list-style: none; margin: 1px; display:inline; float:left; padding:4px; position:relative; }


ul#navi1 a {color: #DBDBDB; text-decoration:none;}


ul#navi1 a:hover {color: black; }




ul#navi1 li ul {margin:0; padding:0}


ul#navi1 li ul li {list-style: none; margin: 1px; display:block; float:none; padding:4px; position:absolute; }
}





/* Erweiterung zur dynamischen Ein-/Ausblendung */
ul#navi1 li>ul {
display: none; top: 1.6em;
}
ul#navi1 li:hover>ul, ul#Navigation li>a#aktuell+ul {
display: block;
}


/* Workaround fuer den IE 7 */
*:first-child+html ul#Navigation ul {
background-color:silver; padding-bottom:0.4em;
}
 
Werbung:
Für Untermenüs musst du verschachelte <ul> schreiben.

Ich hatte dazu vor längerer Zeit mal ein einfach nachzuvollziehendes Beispiel erstellt:

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Horizontale CSS-Navigation</title>
        <style type="text/css">
        
          /* Zuerst die Listenformatierung aufheben */
          #menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
          }
          
           /* Anschließend alle Listenelemente links nebeneinander anordnen */
          #menu ul li {
            display: block;
            float: left;
          }
          
          /* Die Linkformatierung entfernen */
          #menu ul li a {
            text-decoration: none;
            color: black;
          }
          
          /* Danach das Submenü im Normalzustand unsichtbar stellen */
          #menu ul li ul {
            display: none;
          }
          
          /* ... und beim Hovern wieder sichtbar machen */
          #menu ul li:hover ul {
            display: block;
          }
          
          /* Zum Schluß die Listenelemente des Submenüs untereinander anordnen */
          #menu ul li ul li {
            clear: both;
          }
        </style>
    </head>
    <body>
        <div id="menu">
           <ul>
               <li>
                   <a href="#">Hauptmenüpunkt_1</a>
                  <ul>
                    <li><a href="#">Element 1.1</a></li>
                    <li><a href="#">Element 1.2</a></li>
                    <li><a href="#">Element 1.3</a></li>
                  </ul>
               </li>
               <li>
                   <a href="#">Hauptmenüpunkt_2</a>
                 <ul>
                    <li><a href="#">Element 2.1</a></li>
                    <li><a href="#">Element 2.2</a></li>
                    <li><a href="#">Element 2.3</a></li>
                 </ul>
               </li>
           </ul>
        </div>
    </body>
</html>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben