Setting Validate Copy Format

li {
  display: block;
  transition-duration: 0.5s;
}

li:hover {
  cursor: pointer;
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: center;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
  color: red;
  padding: 0;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}
li:focus-within a {
  outline: none;
}
*{
  font-family: Helvetica, sans-serif;
}


header{
  top: 0;
  position: fixed;
  width: 100%;
  animation: 1s ease-out 0s 1 slideInLeft;
  background: #666;
  
  background-image: linear-gradient(to bottom right, darkblue, black);
  
}

body{
  margin: 0;
  padding: 0;
  
}
.underlineEffects ul {
  
  margin: 0 auto;
  
  padding: 0;
  
  list-style: none;
  
  display: table;
  text-align: center;
}

.underlineEffects li {
  
  float: left;
  
  position: relative;
  
  padding: 15px 0;
}

.underlineEffects a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}

.underlineEffects a:after {
  
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.underlineEffects a:hover:after {
  
  width: 100%;
  
  left: 0;
  
}

.actief{
  padding: 15px 0;
  color: #fff;
  line-height: 90%;
  text-transform: uppercase;
  border-bottom: 2px solid;
  text-decoration-style: solid;
  letter-spacing: 0.15em;
  display: inline-block;
  padding: 15px 20px;
  position: relative;
  font-weight: bold;
}

Setting Validate Copy Format

<!DOCTYPE html>
<html lang="en">
  <head>
    
  <meta charset="UTF-8">
  <link rel="stylesheet" href="index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Document
  </title>
  </head>
  <body>
    <header>
      <nav role="navigation">
        <div class="underlineEffects">
          <ul>
            <li>
              <a href="#">
                One
              </a>
            </li>
            <li>
              <a href="#">
                Two
              </a>
              <ul class="dropdown">
                <li>
                  <a href="#">
                    Sub-1
                  </a>
                </li>
                <li>
                  <a href="#">
                    Sub-2
                  </a>
                </li>
                <li>
                  <a href="#">
                    Sub-3
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">
                Three
              </a>
            </li>
          </ul>
      </div>
      </nav>
  </header>
  </body>
</html>

Copy Format

Download