zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit einem CSS-Menü (UL-Liste)!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.10.2006, 10:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.10.2006
Beiträge: 1
hagbard_2605 befindet sich auf einem aufstrebenden Ast
Standard Probleme mit einem CSS-Menü (UL-Liste)!

Hallo zusammen,

ich kämpfe seit drei Tagen mit einem CSS-Menü und bekomme es nicht hin. Ich bin noch nicht ganz firm mit CSS, arbeite aber dran. Vielleicht kann mir hierbei jemand helfen.

Ich habe eine UL-Liste, die das CMS erstellt. Die erste Ebene soll horizontal dargestellt werden und bei einem RollOver sollen die zweite UND dritte Ebene auftauchen. Und das möglichst untereinander. Siehe Skizze unter Unbenanntes Dokument.

Ich bekomme das nicht hin, entweder die zweite und dritte Ebene stehen ineinander (überlappend) oder nebeneinander (versetzt). Aber das sie in einer Reihe stehen, klappt nicht.

Das ist mein HTML-Code:

Code:
<div id="vpnavigation">  <ul id="nav" style="float:left;">
    <li>
      <a href="front_content.php?idcat=18">erste Ebene 1 </a>    </li>
    <li>
      <a class="daddy" href="front_content.php?idcat=19">erste Ebene 2 </a>
      <ul>
            <li>
                  <a class="daddy" href="front_content.php?idcat=50">zweite Ebene 1 </a>
                  <ul>
                    <li>

                              <a href="front_content.php?idcat=49">dritte Ebene 1 </a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 2 </a><a href="front_content.php?idcat=32"></a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 3 </a><a href="front_content.php?idcat=33"></a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 4 </a><a href="front_content.php?idcat=34"></a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 5 </a><a href="front_content.php?idcat=35"></a>                    </li>
                    <li>

                              <a href="front_content.php?idcat=49">dritte Ebene 6 </a><a href="front_content.php?idcat=36"></a>                    </li>
          </ul>
            </li>
            <li>
                  <a class="daddy" href="front_content.php?idcat=37">zweite Ebene 2 </a>

                  <ul>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 1</a><a href="front_content.php?idcat=38"></a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 2 </a><a href="front_content.php?idcat=39"></a>                    </li>
                    <li>

                              <a href="front_content.php?idcat=49">dritte Ebene 3 </a><a href="front_content.php?idcat=40"></a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 4 </a><a href="front_content.php?idcat=41"></a>                    </li>
          </ul>
            </li>
            <li>

                  <a class="daddy" href="front_content.php?idcat=42">zweite Ebene 3 </a>
                  <ul>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 1 </a><a href="front_content.php?idcat=43"></a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 2 </a><a href="front_content.php?idcat=44"></a>                    </li>
          </ul>
            </li>
            <li>
                  <a class="daddy" href="front_content.php?idcat=45">zweite Ebene 4 </a>
                  <ul>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 1</a><a href="front_content.php?idcat=46"></a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 2 </a><a href="front_content.php?idcat=47"></a>                    </li>
                    <li>
                              <a href="front_content.php?idcat=49">dritte Ebene 3 </a><a href="front_content.php?idcat=48"></a>                    </li>
          </ul>
            </li>
      </ul>
    </li>
    <li>
      <a class="daddy" href="front_content.php?idcat=20">erste Ebene 3 </a>
      <ul>
            <li>

                  <a href="front_content.php?idcat=24">zweite Ebene 1 </a>            </li>
            <li><a href="front_content.php?idcat=24">zweite Ebene 2 </a></li>
            <li><a href="front_content.php?idcat=24">zweite Ebene 3 </a></li>
            <li><a href="front_content.php?idcat=24">zweite Ebene 4 </a></li>
            <li><a href="front_content.php?idcat=24">zweite Ebene 5 </a></li>
            <li><a href="front_content.php?idcat=24">zweite Ebene 6 </a></li>
            <li><a href="front_content.php?idcat=24">zweite Ebene 7 </a></li>
      </ul>
    </li>
    <li>

      <a href="front_content.php?idcat=21">erste Ebene 4 </a>    </li>
    <li>
      <a href="front_content.php?idcat=22">erste Ebene 5 </a>    </li>
  </ul>


</div>
Und das meine CSS-Datei, wobei die IDs erhalten bleiben müssten, da diese ja vom CMS generiert werden:

Code:
#nav li {
   float:left;
}

#vpnavigation, #vpnavigation ul { /* alle Listen */
   padding: 0;
   margin: 0;
   list-style: none;
   line-height: 1;
}

#vpnavigation a {
   display: block;
   margin-top: 9px;
   margin-bottom: 5px;
   text-decoration: none;
}

#vpnavigation li { /* alle Listenelemente */
   padding-right: 19px;
}

#vpnavigation li ul { /* Listen 2. Ebene */
   padding-left: 5px;
   position: absolute;
   background: orange;
   width: auto;
   left: -999em; /* durch "left" au�erhalb des sichtbaren Bereichs wird das gleiche erreicht wie durch "display: none", kann aber auch von Textbrowser angezeigt werden */
}

#vpnavigation li ul li { /* Listen 2. Ebene */
   clear: both;
}

#vpnavigation li li a.daddy { /* Listenelemente mit Unterpunkten */
   background: url(../images/rightarrow.gif) center right no-repeat;
   
}

#vpnavigation li ul ul { /* Listen 3. Ebene und weiter */
   margin: -1em 0 0 10em;
   width: 170px;
}

#vpnavigation li:hover ul ul, #vpnavigation li.sfhover ul ul {
   left: -999em;
}

#vpnavigation li:hover ul, #vpnavigation li li:hover ul, #vpnavigation li.sfhover ul, #vpnavigation li li.sfhover ul { /* Listen, die unterhalb von "gehoverten" Men�punkte liegen */
   left: auto;
}

#vpnavigation li.activepath { /* Listenelemente, die im aktiven Pfad liegen */
   font-style: italic!important;
}

#vpnavigation li#active { /* Listen zur aktuellen Kategorie */
   font-style: italic!important;
}
Und bitte nicht lachen, ich lerne noch Vielen dank für eure Hilfe!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Liste per CSS einrücken Flubber CSS 2 08.02.2011 15:33
CSS Menü auf Internet Explorer abstimmen raphi156 CSS 33 22.12.2010 10:10
css menü, brauche dringend hilfe BlackRavn CSS 9 09.10.2010 10:06
CSS Menü zickt rum /IE6/IE7/FF GizmotroniX CSS 3 11.07.2007 08:14
Verschachtelte Liste für Nav Menue klaus CSS 6 19.06.2007 10:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:05 Uhr.