animiertes, horizontales Menü

HTML

<ul id="mainnav">
    <li class="aktuelles"><a href="#">Aktuelles</a></li>
    <li class="leistungen active"><a href="#">Leistungen</a></li>
    <li class="kontakt"><a href="#">Kontakt</a></li>
</ul>

CSS

#mainnav { 
        float: left;
        margin: 0;
        padding-left: 0;
        list-style-type: none; 
        font-family: Verdana, sans-serif; 
    }
    
    /* Der Overflow verhindert, dass man den übergrossen Balken sieht. */
    #mainnav li {
        float: left; 
        font-size: 12px;
        margin: 0 6px 0 0;
        position: relative;
        width: 120px;
        overflow:
    } 
    #mainnav li.kontakt {
        margin-right: 0;
    }

    #mainnav li.aktuelles a     {color: #ba0e31;}
    #mainnav li.leistungen a    {color: #40590a;}
    #mainnav li.kontakt a       {color: #58595b;}
    
    #mainnav a {
        display: block;
        text-decoration: none;
        position: relative;
        top:10px;
        padding-left: 1px;
        -webkit-transition:top 0.2s linear;
           -moz-transition:top 0.2s linear;
             -o-transition:top 0.2s linear;
                transition:top 0.2s linear;
        
    }
    
    #mainnav li a:hover, #mainnav a:focus, #mainnav li.active a { 
        position: relative;
        top: 0px; 
        text-decoration: none;
    }
    
    /* hier wird der Balken unter den Links der Hauptnavigation erzeugt */
    #mainnav a:after {
        content:"";
        display: block;
        position: relative;
        left: -1px;
        height: 29px;
        z-index: 1;        
    }    

    .aktuelles a:after  {background: #ba0e31;}
    .leistungen a:after {background: #80bb00;}
    .kontakt a:after    {background: #58595b;}



/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px; }

/* Der Clearfix auf das Body-Element angewendet */

body:after {
    clear:both;
    content:".";
    display:block;
    font-size:0;
    height:0;
    visibility:hidden;
  }

  /* benötigt Safari zwingend */
  body { display:block; }

  /* IE6 +...