<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="#">home</a>
    <div class="menu__link--border"></div>
  </li>

  <li class="menu__item">
    <a class="menu__link" href="#">projects</a>
    <div class="menu__link--border"></div>
  </li>

  <li class="menu__item">
    <a class="menu__link" href="#">what we do</a>
    <div class="menu__link--border"></div>
  </li>

  <li class="menu__item">
    <a class="menu__link" href="#">about us</a>
    <div class="menu__link--border"></div>
  </li>

  <li class="menu__item">
    <a class="menu__link" href="#">contact us</a>
    <div class="menu__link--border"></div>
  </li>

  <li class="menu__item">
    <i class="menu__link fas fa-search"></i>
  </li>
</ul>


.menu {
  padding-top: 35px;
  display: flex;
  list-style-type: none;
  margin: 0 0;
}
.menu__link {
  font-size: 14px;
  font-weight: 700;
  color: #ffb932;
  text-decoration: none;
  text-transform: uppercase;
}
.menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 30px;
  height: 22px;
}
.menu__item:hover .menu__link {
  color: #ffffff;
}
.menu__item:hover .menu__link--border {
  width: 25px;
  height: 22px;
  border-bottom: 2px solid #ffffff;
}