Page Widget How to - Create CSS only menu with li in full width

Question

We would like to know how to create CSS only menu with li in full width.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul {<!--from  ww w  . ja v a  2s .c om-->
  width: 90%;
  background: #222;
  margin: 0;
  padding: 10px;
  display: table;
  table-layout: fixed;
}

ul li {
  display: table-cell;
}

ul li a {
  display: block;
  background: #555;
  text-align: center;
  color: white;
  padding: 10px 0;
}

ul li:nth-child(even) a {
  background: #888;
}

ul li a:hover {
  background: #fff;
  color: black;
}
</style>
</head>
<body>
  <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>
</body>
</html>

The code above is rendered as follows: