Vertikales CSS Flyout Menü

Dieses Flyout Menü habe ich ebenfals überarbeitet. Es funktioniert wie das Horizontales Flyout Menü, nur das die Sub Navigation seitlich erscheint.



Der HTML Code

<ul class="navigation">
    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
            <li><a href="" class="link">1</a></li>
            <li><a href="" class="link">2</a></li>
            <li><a href="" class="link">3</a></li>
            <li><a href="" class="link">4</a></li>
            <li><a href="" class="link">5</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
      <li><a href="" class="link">1</a></li>
            <li><a href="" class="link">2</a></li>
            <li><a href="" class="link">3</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
            <li><a href="" class="link">1</a></li>
            <li><a href="" class="link">2</a></li>
            <li><a href="" class="link">3</a></li>
            <li><a href="" class="link">4</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
            <li><a href="" class="link">1</a></li>
            <li><a href="" class="link">2</a></li>
            <li><a href="" class="link">3</a></li>
            <li><a href="" class="link">4</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
            <li><a href="" class="link">1</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
    </li>
</ul>


Der CSS Code

.navigation{
  width:120px; height:180px;
  padding:0px; margin:0px;
  background-color:#333333;
  z-index:50; position:relative;
  top:0px; left:0px;
  list-style:none;
}

.navigation a{
  color:#333333; text-decoration:none;
}

.navigation a:hover{
  color:#FFFFFF; text-decoration:none;
}

.navi_top{
  width:120px; height:30px;
  background:#CCC;
  float:left;
}

.toplink{
  width:120px; height:30px;
  float:left;
  line-height:30px;
  font-size:16px;
  padding:0 0 0 10px;
}

.navi_sub{
  width:120px; height:auto;
  position:relative;
  left:120px; top:-30px;
  display:none;
  list-style:none;
  margin:0px;
  padding:0px;
}

.link{
  width:110px; height:30px;
  float:left; line-height:30px;
  background-color:#666666;
  padding:0 0 0 10px;
}

.link:hover{
  background:#CCCCFF;
}

.navi_top:hover .navi_sub{
  display:block;
}