Horizontales CSS Flyout Menü

So hier erkläre ich euch nun das auf CSS basierenden Hover Menü Ich hab das Flyout Menü noch einmal überarbeitet, da es doch einige Probleme bei der Darstellung in den älteren IE Versionen gab.

Die Funktion ist eigentlich ganz simpel zu erklären. Fährt man mit der Maus über einen Menüpunkt (Hover), wird das Submenü (Display:block) eingeblendet. Hier seht ihr schon mal wie das Menü aussehen könnte.

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">link</a></li>
         <li><a href="" class="link">link</a></li>
         <li><a href="" class="link">link</a></li>
         <li><a href="" class="link">link</a></li>
      </ul>
  </li>

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

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

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

Der CSS Code

.navigation-example{
    width:auto; height:30px;
    margin:0px auto;
    line-height:30px;
    z-index:20;
    font-size:12px;
    margin-top:0px;
    position:relative;
    background:#000;
}

.navigation-example li, .navigation-example ul{
    list-style:none;
    padding:0px;
    margin:0px;
}

.navigation-example li{
    float:left;
}

.navigation-example, .navigation-example a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
}

.toplink{
    height:30px; float:left;
    padding:0 20px 0 20px;
    font-size:18px;
}

.toplink:hover{
    color:#0488d3; cursor:pointer;
}

.navi_sub a{
    font-size:12px;
}

.navi_sub{
    height:auto; width:140px;
    display:none; clear:left;
    position:absolute;
    top:30px;
    margin:0px auto;
}

.link{
    width:120px; height:25px;
    font-size:12px;
    padding:0 0 0 20px;
    float:left;
    background-color:#000;
    opacity:0.8;
}

.nav_clear{
    clear:left;
}

.link:Hover{
    color:#000;
    background:#ccc;
}

.navigation-example li:hover .navi_sub{
    display:block;
}