Zum Inhalt springen

Verschachtelte Listen mappen

Erstellt am 27. Juni 2011 · Noch keine Antworten

Tags: Frage

prosbaer ·

Hallo liebes Forum,

ich habe mir nach dieser Anleitung ein Mega-Menu gebaut: http://www.sitepoint.com/examples/megadropdowns/completed.html

Jetzt stehe ich vor dem Problem das alles zu mappen, hier ist der HTML-Quelltext:

<ul class="menu">
            <li class="mega">
                <h2>
                    <a href="#">  Start  </a>
                </h2>
                <div>
                    <ul class="submenu" style="border: 1 px solid green;">

                        <li class="dgrey"><a href="#" class="slink">Link 1</a></li>
                        <li class="lgrey"><a href="#" class="slink">Link 2</a></li>
                        <li class="dgrey"><a href="#" class="slink">Link 3</a></li>
                        <li class="lgrey"><a href="#" class="slink">Link 4</a></li>
                        <li class="dgrey"><a href="#" class="slink">Link 5</a></li>
                        <li class="lgrey"><a href="#" class="slink">Link 6</a></li>

                        <li class="dgrey"><a href="#" class="slink">Link 7</a></li>
                    </ul>
                    
                </div>
            </li>

            <li class="mega">
                <h2>
                    <a href="#">  Wir über Uns  </a>

                </h2>
                <div>
                    <ul class="submenu" style="border: 1 px solid green;">
                        <li class="dgrey"><a href="#" class="slink">Link 1</a></li>
                        <li class="lgrey"><a href="#" class="slink">Link 2</a></li>
                        <li class="dgrey"><a href="#" class="slink">Link 3</a></li>
                        <li class="lgrey"><a href="#" class="slink">Link 4</a></li>

                        <li class="dgrey"><a href="#" class="slink">Link 5</a></li>
                        <li class="lgrey"><a href="#" class="slink">Link 6</a></li>
                        <li class="dgrey"><a href="#" class="slink">Link 7</a></li>
                    </ul>

                </div>
            </li>

            <li class="mega">
                <h2>
                    <a href="#">  Kurse  </a>
                </h2>

            </li>

            <li>
                <h2>

                    <a href="#">  Selbsthilfegruppen  </a>
                </h2>
            </li>
        </ul>

Ich weiß echt nicht, wie ich rangehen soll, habe bisher immer nur einfache Navigationen gemappt, jetzt scheitere ich speziell an den LI's die die H2 für den Linktitel und den DIVs, die die Submenus enthalten.

Jeder Tipp oder Link ist sehr willkommen,

danke im Voraus

prosbaer