animiertes, horizontales Menü mit Pfeil

Im aktiven Modus und bei hover erscheint ein Pfeil am farbigen Balken unter dem Menütext.

by Jens Grochtdreis

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

/**
 * @section        horizontale Navigation
 */

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

    #mainnav li.aktuelles a, #aktuelles #subnav a   {color: #ba0e31;}
    #mainnav li.haeuser a, #haeuser  #subnav a, 
    #haeuser #subnav form *, #haeuser #gmapcnt h3      {color: #b94600;}
    #mainnav li.leistungen a, #leistungen #subnav a    {color: #40590a;}
    #mainnav li.rat a, #rat #subnav a                  {color: #510b61;}
    #mainnav li.unternehmen a, #unternehmen #subnav a  {color: #0072bc;}
    #mainnav li.karriere a, #karriere #subnav a        {color: #b10060;}
    #mainnav li.kontakt a, #kontakt #subnav 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;}

    #mainnav li.active a:before, #mainnav li:hover a:before {
        content:"";
        background: transparent url('http://grochtdreis.de/test/sprite-navigation.png') no-repeat 0...