Page Widget How to - Hover to change menu item background and bottom border

Question

We would like to know how to hover to change menu item background and bottom border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul {<!--from   www . j  a va2  s .c  o m-->
  padding-left: 0px;
}

ul li {
  float: left;
  display: block;
  margin-left: 20px;
  position: relative;
  color: inherit;
}

ul li:first-child {
  margin-left: 0px;
}

.link {
  overflow: hidden;
  cursor: pointer;
}

.link a {
  text-decoration: none;
  color: gray;
  -webkit-transition: color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.link a:hover {
  color: #fb6f5e;
}

.link span {
  position: absolute;
  left: -100%;
  bottom: 1px;
  height: 1px;
  width: 100%;
  background: #fb6f5e;
  -webkit-transition: all 0.4s;
}

.link:hover span {
  bottom: 1px;
  left: 0%;
  height: 1px;
  width: 100%;
  background: #fb6f5ee;
  -webkit-transition: all 0.4s;
}
</style>
</head>
<body>
  <ul>
    <li>
      <div class="link">
        <a href="#">Start <span></span>
        </a>
      </div>
    </li>
    <li>
      <div class="link">
        <a href="#">About <span></span>
        </a>
      </div>
    </li>
    <li>
      <div class="link">
        <a href="#">Other <span></span>
        </a>
      </div>
    </li>
    <li>
      <div class="link">
        <a href="#">Contact <span></span>
        </a>
      </div>
    </li>
  </ul>
</body>
</html>

The code above is rendered as follows: