Foundation Framework und side-nav Klase

[anonymus]

Hallo zusammen,
benutze momentan das Foundation Framework.
Jedoch bin ich da auf ein Problem gestoßen.
Ich weiß nicht wie ich eine vertikale Navigation hinbekomme.
Hier mal mein Code:

<div class="row">
   <div class="two columns text-center">
        <ul class="side-nav">
            <li class="active"><a href="#">Startseite</a></li>
            <li><a href="#">Über uns</a></li>
            <li class="has-flyout"><a href="#">Ihre Hilfe</a></li>
            <li><a href="#">Mitglieder</a></li>
            <li><a href="#">Sponsoren</a></li>
            </ul>
       </div>

Und der dazu pasende CSS Code:

ul.side-nav { display: block; list-style: none; margin: 0; padding: 17px 0; }
ul.side-nav li { display: block; list-style: none; margin: 0 0 7px 0; border-bottom: 1px dotted ; }
ul.side-nav li a { display: block; font-size:25px; color:black  }
ul.side-nav li.active a { color: orange; font-weight: bold; }
ul.side-nav a:hover{ color:orange;  }
ul.side-nav li.divider { border-top: 1px solid #e6e6e6; height: 0; padding: 0; }

Ich weiss das ich die nav-bar mit der .vertical Klasse nutzen kann diese funktioniert bei mir aber irgendwie nicht ordnungsgemäß.

Ich hoffe hier kann mir jemand helfen.

Gruß anonymus

 

[threadi]

Und wo steht die vertical-Klasse?

Moderation: Verschoben von HTML zu CSS.

 

[anonymus]

Hey Threadi,
hier ist die vertical Klasse:

.nav-bar.vertical { height: auto; margin-top: 0; float:left; }.nav-bar.vertical > li { float: none; border-bottom: none; border-right: solid 0px #333333; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.nav-bar.vertical > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: transparent transparent transparent #e6e6e6; }
.nav-bar.vertical > li .flyout { left: 100%; top: -1px; }
.nav-bar.vertical > li .flyout.right { left: auto; right: 100%; }
.nav-bar.vertical > li.active { border-right: solid 0px #2284a1; }
.nav-bar.vertical > li:last-child { border-bottom: solid 0px #333333; }

 

[threadi]

Und wo findet die sich im HTML-Code?