simple horizontale Navigation in Reiteroptik

by Jens Grochtdreis

HTML

<ul class="karteireiter">
    <li><a href="#">Tölpel !</a></li>
    <li><a href="#">Königstochter</a></li>
    <li><a href="#">Hans Andersen</a></li>
    <li><a href="#">Hallo!</a></li>
    <li><a href="#">Märchenherrlichkeit</a></li>
</ul>

CSS

ul.karteireiter, ul.karteireiter li {margin: 0;padding: 0;}
ul.karteireiter { 
    margin: 1em;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #000;
    }
ul.karteireiter li{display: inline;}
ul.karteireiter a:link, ul.karteireiter a:visited {
    display: inline-block;
    padding: 0.5em;
    background: rgb(170,210,210);
    background: rgba(200,200,200,0.5);
    border: 1px solid #000;
    border-bottom: none;
    text-decoration: none;
    color: #000;}
ul.karteireiter a:hover{background-color: #f4a460;text-decoration: underline;}