Page Widget How to - Highlight menu item background when hover

Question

We would like to know how to highlight menu item background when hover.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a {<!--from w ww  .j a  v  a 2s  .c o  m-->
  display: table-cell;
}

a.menu_filler {
  background: black;
  height: 30px;
  width: auto;
  padding: 10px;
  margin: 5px;
  margin-left: 0;
}

a.menu {
  background: green;
  height: 30px;
  padding: 10px;
  margin: 5px;
  color: blue;
}

a.menu:hover {
  background: blue;
  color: green;
}

div.navbar {
  background: silver;
  width: 600px;
  margin: auto;
  text-align: center;
}
</style>
</head>
<body>
  <div class='navbar'>
    <a class='menu_filler'></a> 
    <a class='menu' href='#'>LINK</a> 
    <a class='menu' href='#'>BIGGER LINK</a> 
    <a class='menu' href='#'>BIGGEST LINK</a> 
    <a class='menu_filler'></a>
  </div>
</body>
</html>

The code above is rendered as follows: