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

Question

我想在将鼠标悬停在导航栏中的链接上时创建下划线。我不确定我应该定位哪个 id。这是我的 JFiddle:https://jsfiddle.net/gzycz4h8/

提前致谢。

<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

你在寻找这样的东西吗？

#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;

}