Simple Horizontal Navigation Bar

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Horizontal Navigation Bar</title>
<style>
     #nav {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      list-style: none;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc; }
   #nav li {
      float: left; }
   #nav li a {
   border: 1px solid #333;
    color: #333;
    display: block;
    font-weight: bold;
    padding: 13px 46px;
    text-decoration: none;
 }
   #nav li a:hover {
      color: #FFFFFF;
      background-color: #666666; }
   body {
      background-color: #666666; 
      font: Georgia, "Times New Roman", Times, serif; }
   #wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; }
  
</style>
</head>

<body>
<div id="wrap">
     <ul id="nav">
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Products</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Login</a></li>
   </ul>
 
</div>

</body>
</html>

CSS and CSS3 TutorialS

Search This Blog

Simple Horizontal Navigation Bar

Create index.html

Comments

Post a Comment