horizontale Navigation mit Trennern

Die Trenner am Ende werden abgeschnitten, ohne :first-child oder :last-child zu nutzen.

by Jens Grochtdreis

HTML

<p>Bei diesem Menü wird der Trenner links gesetzt. </p>
<ul class="noList menue menue1">
    <li><a href="#">Däumelieschen</a></li>
    <li><a href="#">Die Störche</a></li>
    <li><a href="#">Der fliegende Koffer</a></li>
</ul>
<p>Bei diesem Menü handelt es sich um einen Float</p>
<ul class="noList menue menue2">
    <li><a href="#">Däumelieschen</a></li>
    <li><a href="#">Die Störche</a></li>
    <li><a href="#">Der fliegende Koffer</a></li>
</ul>
<p>Bei diesem Menü handelt es sich um einen Float und der Trenner ist mal rechts</p>
<ul class="noList menue menue3">
    <li><a href="#">Däumelieschen</a></li>
    <li><a href="#">Die Störche</a></li>
    <li><a href="#">Der fliegende Koffer</a></li>
</ul>

CSS

body {padding: 40px;}
.noList { list-style-type: none; margin: 0; padding: 0; }
p { padding: 25px 0 5px 0;clear: both; color: #a20000;}
.menue li { display: inline} 
.menue a { text-decoration: none; color: #000; }
.menue a:hover, .menue a:focus { text-decoration: underline; color: #a20000; }

.menue1 a { border-left: 1px solid #000;padding: 0 20px; margin-left: 10px; }
.menue1 a:hover, .menue1 a:focus { border-left: 1px solid #a20000; }

.menue1 {overflow: hidden; }
.menue1 li { margin-left: -21px;}


.menue2 {float: left; margin: 0; padding: 0; overflow: hidden;}
/* negatives Margin nach links, damit die erste Linie verschwindet! (overflow: hidden im Wrapper!) */
.menue2 li {float: left; margin: 0 0 0 -1px; padding: 0 20px; border-left:1px solid #000;}
.menue2 li a {color: #000; }
.menue2 li a:hover, .menue2 li a:focus {color: #a20000;}

.menue3 {float: left; margin:0; padding: 0; overflow: hidden;}
/* negatives Margin nach links, damit die erste Linie verschwindet! (overflow: hidden im Wrapper!) */
.menue3 li {float: left; margin: 0 -1px 0 0; padding: 0 20px; border-right:1px solid #000;}
.menue3 li a {color: #000; }
.menue3 li a:hover, .menue2 li a:focus {color: #a20000;}