basti1012.bplaced.net

Navigation mit bewegenden Unterstrich

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>