CSS navにhoverで動きをつけたい

Question

前提・実現したいこと

htmlとcssを勉強しいます。
cssでhoverをつけてマウスポインタが置かれた時はメニュー下部に白い線が出るようにしたいのですができません。
書籍を読んで同じようにやっているのですが。
わかる方がいたら教えていただきたいです。
エディタはBracketsを使っています

発生している問題・エラーメッセージ

該当のソースコード

<nav>
　　<ul class ="global-nav">
	<li><a href="sweet.html">PROFILE</a></li>
	<li><a href="interview.html">ABOUT</a></li>
	<li><a href="contact.html">CONTACT</a></li>
</ul>

a{
  color: #3583aa;
}
a:visited{
  color: #788d98;
}
a:hover{
  text-decoration: underline;
}
.global-nav{
  float: right;
  margin-top: 30px;
}
.global-nav li{
  float: left;
  margin: 0 20px;
  font-size: 20px;
  list-style: none;
}
.global-nav li a{
  color: #ffffff;
}
.global-nav li a:hover{
  border-bottom: :2px solid #ffffff;
}

Answer 1

リンクの文字にはもともと下線がついているので、hoverされてないときは下線の色を消すか、変えておくといいですよ。

a{
  color: black;
  text-decoration: none; // こんなかんじ
}

Comments

[cuku]

ありがとうございます！！！

Answer 2

/*             ↓ これを消す */
border-bottom: :2px solid #ffffff;

Comments

[cuku]

ありがとうございます！
下部に白線がつくようになりました。

白線をマウスポインタが置かれる前は表示しないようにすることはできるんでしょうか？