# Dropdown hinzufügen als data-type



## krug_s (13. Februar 2015)

Hallo wie kann ich Dropdown Menu erstellen, wenn ich data-type als Navigation benutze??


Zb. unter Mitglieder will ich jetzt noch 2 zusätzliche Punkte resp. Seiten wie Download und Profil.


```
<li>
               <a data-type="mitglieder" href="#0">Mitglieder</a>
           </li>
```

Bei mir funktioniert es nicht, ich habe probiert einfach zusätzlich noch 2 <li> Elemente hinzufügen...aber es klappt nicht. Was mache ich falsch? 


Hier wäre meine Navigation Code.. 

```
<nav class="cd-filter">
            <ul>
                <li class="placeholder">
                    <a data-type="start" href="#0">Navigation</a> <!-- Mobil-auswählen -->
                </li>

                <li>
                    <a class="selected" data-type="start" href="#0">Startseite</a>
                </li>

                <li>
                    <a data-type="news" href="#0">News</a>
                </li>

                <li>
                    <a data-type="verein" href="#0">Forum</a>
                </li>
               
                <li>
                    <a data-type="geschichte" href="#0">Gästebuch</a>
                </li>
               
                <li>
                    <a data-type="mitglieder" href="#0">Mitglieder</a>
                </li>
               
                <li>
                    <a data-type="gallerie" href="#0">Gallerie</a>
                </li>
               
                <li>
                    <a data-type="kontakt" href="#0">Kontakt</a>
                </li>
            </ul>
        </nav>
```


----------



## SpiceLab (13. Februar 2015)

Unabhängig von *data-type* erhält ein Dropdown-Menü in der Listenstruktur jede weitere/tiefere Menüebene durch Einbettung (Verschachtelung) einer Liste im Obermenüpunkt *<li></li>*:

```
<nav class="cd-filter">
  <ul><!-- Start 1. Menüebene -->
    ...
    <li>
      <a data-type="mitglieder" href="#0">Mitglieder</a>
      <ul><!-- Start 2. Menüebene -->
        <li>...</li>
        <li>...</li>
      </ul><!-- Ende 2. Menüebene -->
    </li>
    ...
  </ul><!-- Ende 1. Menüebene -->
</nav>
```
[edit]Tipp-Ex[/edit]​


----------

