How to Design a Simple Menu Using Html And CSS

This is simple program to generate menu bar. The menu bar contains simple design that can be change in term of color, font size and font color.

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <style>
  br { clear:left }
  .menu_simple {
  width: 100%;
  background-color: #005555;
  }
  .menu_simple ul {
  margin: 0; padding: 0;
  float: left;
  }
  .menu_simple ul li {
  display: inline;
  }
  .menu_simple ul li a {
  float: left; text-decoration: none;
  color: white;
  padding: 10.5px 11px;
  background-color:  #005555;
  }
  .menu_simple ul li a:visited {
  color: white;
  }
  .menu_simple ul li a:hover, .menu_simple ul li .current {
  color: white;
  background-color: #5FD367;
  }
 </style>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Menu in CSS</title>
</head>
<body>
 <div class="menu_simple">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Careers</a></li>
   <li><a href="#">Site Map</a></li>
  </ul>
 <br />
 </div>
</body>
</html>

Output of the Program

About Asad

Asad Niazi is Software Engineer , Programmer, Web Developer and a young mentor of BloggersTown and PProgramming. Asad Love to writes about Technology, Programming, Blogging and make money online.