当我将鼠标悬停在导航栏中的链接上时，如何创建下划线？

Question

I want to create an underline when I hover over the links in my navigation bar. I'm not sure which id I should be targeting. Here's my JFiddle: https://jsfiddle.net/gzycz4h8/

Thanks in advance.

<ul id="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Writing</a></li>
  <li><a href="#">Multimedia</a></li>
  <li><a href="#">Resume</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Answer 1

are you looking for something like this ?

#nav {
  padding: 10px 0;
  width:700px;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display:block;
  text-decoration: none;
  -webkit-box-shadow: 0 2px 10px -12px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}

#nav li {
  display: inline-block;
  margin: 5px;
  text-transform: uppercase;

}
#nav li a {
  text-decoration:none;
}
#nav li a:hover {
    text-decoration: underline;
    text-decoration-color: black;
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;

}

Answer 2

Or something like this: https://jsfiddle.net/m16gggk1/1/

#nav {
  padding: 0;
  width:700px;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display:block;
  text-decoration: none;
  -webkit-box-shadow: 0 2px 10px -12px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}

#nav li {
  display: inline-block;
  margin: 0 5px;
  text-transform: uppercase;
  border-bottom:2px solid #fff;

}
#nav li a {
  text-decoration:none;
}
#nav li a:hover {
  color:red;
}
#nav li:hover {
    border-bottom:2px solid red;


}

Answer 3

The most simple solution would be:

li a {
  text-decoration:none;
}

li a:hover {
    text-decoration: underline;
}

https://jsfiddle.net/LvLsckzw/