CSS3 zum Erreichen eines Menü-Hover-Effekts

<nav id="nav-1">
  <a class="link-1" href="#">Startseite</a>
  <a class="link-1" href="#">Über</a>
  <a class="link-1" href="#">Kontakt</a>
  <a class="link-1" href="#">Shop</a>
</nav>

<nav id="nav-2">
  <a class="link-2" href="#">Startseite</a>
  <a class="link-2" href="#">Über</a>
  <a class="link-2" href="#">Kontakt</a>
  <a class="link-2" href="#">Shop</a>
</nav>

<nav id="nav-3">
  <a class="link-3" href="#">Startseite</a>
  <a class="link-3" href="#">Über</a>
  <a class="link-3" href="#">Kontakt</a>
  <a class="link-3" href="#">Shop</a>
</nav>

@import-URL (https://fonts.googleapis.com/css?family=Raleway);
Körper {
  Rand: 0px;
}
Navigation {
  Rand oben: 40px;
  Polsterung: 24px;
  Textausrichtung: zentriert;
  Schriftfamilie: Raleway;
  Kastenschatten: 2px 2px 8px rgba (0, 0, 0, 0,5);
}
#nav-1 {
  Hintergrund: #3fa46a;
}
#nav-2 {
  Hintergrund: #5175C0;
}
#nav-3 {
  Hintergrund: #EEA200;
}

.link-1 {
  Übergang: 0,3 s Leichtigkeit;
  Hintergrund: #3fa46a;
  Farbe: #ffffff;
  Schriftgröße: 20px;
  Textdekoration: keine;
  Rahmen oben: 4px durchgezogen #3fa46a;
  Rahmen unten: 4px durchgezogen #3fa46a;
  Polsterung: 20px 0;
  Rand: 0 20px;
}
.link-1:hover {
  Rahmen oben: 4px durchgezogen #ffffff;
  Rahmen unten: 4px durchgezogen #ffffff;
  Polsterung: 6px 0; 
}

.link-2 {
  Übergang: 0,6 s;
  Farbe: #ffffff;
  Schriftgröße: 20px;
  Textdekoration: keine;
  Rahmen rechts: 2px gepunktet transparent;
  Polsterung: 30px 8px 0 10px;
  Rand: 0 10px;
}
.link-2:hover {
  Rahmen rechts: 2px gepunktet #ffffff;
  Polsterung unten: 24px;
}
.link-3 {
  Übergang: 0,4 s;
  Farbe: #ffffff;
  Schriftgröße: 20px;
  Textdekoration: keine;
  Polsterung: 0 10px;
  Rand: 0 10px;
}
.link-3:hover {
  Hintergrundfarbe: #ffffff;
  Farbe: #EEA200;
  Polsterung: 24px 10px;
}