Page Widget How to - Create Menu box

Question

We would like to know how to create Menu box.

Answer


<!DOCTYPE html>
<html>
<head>
<!--from  w w w.  java 2s.  c  o  m-->
<style type='text/css'>
nav {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  border: 2px solid #ff6600;
  -webkit-border-radius: 6px;
}

nav a {
  font-family: sans-serif;
  display: block;
  color: black;
  padding: 10px;
  -webkit-box-flex: 1;
  text-align: center;
  -webkit-transition: all .4s linear;
}

nav a:hover {
  color: red;
}

p {
  margin-top: 20px;
}
</style>
</head>
<body>
  <nav>
    <a href="#">Home</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
    <a href="#">Rock &amp; Roll</a> 
    <a href="#">Tiger Blood</a>
  </nav>
  <p>Resize the window!</p>
</body>
</html>

The code above is rendered as follows: