メニューのホバー効果を実現するCSS3

<nav id="nav-1">
  <a class="link-1" href="#">ホーム</a>
  <a class="link-1" href="#">概要</a>
  <a class="link-1" href="#">お問い合わせ</a>
  <a class="link-1" href="#">ショップ</a>
</nav>

<nav id="nav-2">
  <a class="link-2" href="#">ホーム</a>
  <a class="link-2" href="#">概要</a>
  <a class="link-2" href="#">お問い合わせ</a>
  <a class="link-2" href="#">ショップ</a>
</nav>

<nav id="nav-3">
  <a class="link-3" href="#">ホーム</a>
  <a class="link-3" href="#">概要</a>
  <a class="link-3" href="#">お問い合わせ</a>
  <a class="link-3" href="#">ショップ</a>
</nav>

url をインポートします(https://fonts.googleapis.com/css?family=Raleway);
体 {
  マージン: 0px;
}
ナビゲーション{
  上マージン: 40px;
  パディング: 24px;
  テキスト配置: 中央;
  フォントファミリー: Raleway;
  ボックスの影: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#nav-1 {
  背景: #3fa46a;
}
#nav-2 {
  背景: #5175C0;
}
#nav-3 {
  背景: #EEA200;
}

.link-1 {
  遷移: 0.3 秒の緩和;
  背景: #3fa46a;
  色: #ffffff;
  フォントサイズ: 20px;
  テキスト装飾: なし;
  上境界線: 4px 実線 #3fa46a;
  下境界線: 4px 実線 #3fa46a;
  パディング: 20px 0;
  マージン: 0 20px;
}
.link-1:ホバー{
  上境界線: 4px 実線 #ffffff;
  下部境界線: 4px 実線 #ffffff;
  パディング: 6px 0; 
}

.link-2 {
  遷移: 0.6 秒;
  色: #ffffff;
  フォントサイズ: 20px;
  テキスト装飾: なし;
  border-right: 2px の点線透明;
  パディング: 30px 8px 0 10px;
  マージン: 0 10px;
}
.link-2:hover {
  右境界線: 2px 点線 #ffffff;
  パディング下部: 24px;
}
.link-3 {
  遷移: 0.4秒;
  色: #ffffff;
  フォントサイズ: 20px;
  テキスト装飾: なし;
  パディング: 0 10px;
  マージン: 0 10px;
}
.link-3:ホバー{
  背景色: #ffffff;
  色: #EEA200;
  パディング: 24px 10px;
}