Page Widget How to - Add hover effect on to Menu items

Question

We would like to know how to add hover effect on to Menu items.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#navbar {<!--from   w w w. j  av a2  s.  co m-->
  width: 900px;
  margin: 0 auto;
  background-color: #3f67c0;
  height: 60px;
}

#navbar ul {
  list-style-type: none;
  text-align: left;
  margin: 0px;
  padding: 0px;
}

#navbar ul li {
  display: inline-block;
}

#navbar ul li a {
  display: block;
  border-right: #FFF solid 1px;
  border-left: none;
  border-top: none;
  boder-bottom: none;
  padding: 20px 40px 20px 40px;
  text-decoration: none;
  color: #fff;
}

#navbar ul li:hover {
  color: #FFF;
  background-color: #35b5eb;
}
</style>
</head>
<body>
  <div id="navbar">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">CLAIM</a></li>
      <li><a href="#">PROOF</a></li>
      <li><a href="#">HELP</a></li>
    </ul>
  </div>
</body>
</html>

The code above is rendered as follows: