Navigation mit marquee Border
Navigation mit bewegenden Unterstrich
Der hier verwendete Code
<nav id="navigation" class="navigation">
<ul class="menu">
<li data-title="Gehe zur Homepage des Seitenbetreivers Basti1012"><a href="http://sebastian1012.bplaced.net/">home</a>
<ul class="submenu">
<li><a>Leer</a></li>
<li><a>Leer</a></li>
<li><a>Leer</a></li>
</ul>
</li>
<li><a href="#">Pens/Fiddles</a>
<ul class="submenu">
<li data-title="Pens und Fiddels von unsren Mitglieder.Diese Pens wurden nicht von uns getestet.Bitte erst auf Funktion testen"><a>Pens</a></li>
<li><a>Fiddles</a></li>
<li><a>Leer</a></li>
</ul>
</li>
</li>
<li data-title="Wegen den neuen Gesetzten bekommt ihr hier den Standart Text zu lesen"><a href="#">Datenschutz</a>
<ul class="submenu">
<li><a>Leer</a></li>
</ul>
</li>
<li data-title="Hier sind Links die man bei einer Wenseiten programierung gut gebrauchen kann"><a href="#">Links</a>
<ul class="submenu">
<li><a>Leer</a></li>
</ul>
</li>
<li data-title="Laut Gesetzt muß auch das sein.Wer Lust hat kann es lesen ,ansonsten wie immer uninteresant."><a href="#">Impressum</a>
<ul class="submenu">
<li><a>Leer</a></li>
</ul>
</li>
</ul>
</nav>
<style>
nav *{
margin:0px;
padding:0px;
}
nav{
width:100vw;
}
.navigation a:hover,
.navigation a:focus {
color:yellow;
}
.menu ul {
list-style: none;
}
.menu li {
background:#0f0f0f;
min-width:19.0vw;
max-width:19.1vw;
}
.menu li {
text-align:center;
float: left;
position: relative;
transition:all .5s;
}
.menu a {
color:white;
font-family: 'Lucida Console';
font-size: 14px;
text-decoration: none;
display:block;
padding:3px 0 3px 0;
overflow:hidden;
}
a:after{
border-bottom:2px solid yellow;
width:0%;
display:block;
content:'';
}
a:hover:after{
background:green;
width:100%;
margin-left:100%;
display:block;
content:'';
transition:all 1.5s;
border-bottom:2px solid red;
}
.submenu li {
display:none;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu {
display:block;
z-index: 1;
}
</style>