How to get links to underline when hover-CodePudding

I want to make my nav links underline when I hover over them. I'm hoping that I can make the Contact, Sign In, Bonds, Report a Claim, About Us, and Search become underlined when I hover over them. I tried messing around with it in CSS but nothing I do seems to work. Can anyone help me figure out how to make that happen?

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

.navbar {
  border-bottom: 2px solid #0C133C;
}

#nav {
  background-color: #fff;
  color: white;
  width: 100%;
}

.nav {
  float: right;
  text-align: left;
  margin: 0;
}

.nav>li {
  display: Inline-block;
  padding: 20px 50px 10px 9px;
}

.nav>li a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  border-bottom: 3px solid transparent;
}

.clearer {
  clear: both;
}

.subnav class {
  margin: 0;
  position: relative;
}

.subnav>div a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  padding: 20px 30px 10px 9px;
}

.logo {
  margin-top: 1rem;
}

.subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem;
}

.flex-container {
  display: flex;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Navbar</title>
<link rel="stylesheet" href=https://kit.fontawesome.com/f04ec83bb3.js" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css" </head>

  <body>

    <div >
      <ul >
        <li >
          <a  aria-current="page" href="#">Contact Us</a>
        </li>
        <li >
          <a  aria-current="page" href="#">Sign In</a>
        </li>
      </ul>
      <div ></div>
    </div>


    <subnav >
      <img src="universallogo.jpg"  />
      <div >
        <a  href="#">
          <a  aria-current="page" href="#">Bonds</a>
        </a>
        <a  aria-current="page" href="#">Report a Claim</a>
        <a  aria-current="page" href="#">About Us</a>
        <a  aria-current="page" href="#">Search</a>
      </div>
       </body>

</html>

CodePudding user response：

.class: hover{ text-decoration: underline; } will do. ".class" would be classes of those you want to make underline while hovering

CodePudding user response：

simple solution would be to use

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

in the css.

CodePudding user response：

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

.navbar {
  border-bottom: 2px solid #0C133C;
}

#nav {
  background-color: #fff;
  color: white;
  width: 100%;
}

.nav {
  float: right;
  text-align: left;
  margin: 0;
}

.nav>li {
  display: Inline-block;
  padding: 20px 50px 10px 9px;
}

.nav>li a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  border-bottom: 3px solid transparent;
}

.clearer {
  clear: both;
}

.subnav class {
  margin: 0;
  position: relative;
}

.subnav>div a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  padding: 20px 30px 10px 9px;
}

.logo {
  margin-top: 1rem;
}

.subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem;
}

.flex-container {
  display: flex;
}

a:hover{
text-decoration:underline!important;}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Navbar</title>
<link rel="stylesheet" href=https://kit.fontawesome.com/f04ec83bb3.js" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css" </head>

  <body>

    <div >
      <ul >
        <li >
          <a  aria-current="page" href="#">Contact Us</a>
        </li>
        <li >
          <a  aria-current="page" href="#">Sign In</a>
        </li>
      </ul>
      <div ></div>
    </div>


    <subnav >
      <img src="universallogo.jpg"  />
      <div >
        <a  href="#">
          <a  aria-current="page" href="#">Bonds</a>
        </a>
        <a  aria-current="page" href="#">Report a Claim</a>
        <a  aria-current="page" href="#">About Us</a>
        <a  aria-current="page" href="#">Search</a>
      </div>
       </body>

</html>