Horizontal Navigation Bar

Horizontal Navigation Bar Creation Step1

Example
<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    li {
      display: inline;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#Course">Course</a></li>
    <li><a href="#Help">Help</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#branch">Branch 1</a></li>
  </ul>
</body>
</html>

Horizontal Navigation Bar Creation Step2

Example
<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    li a {
      background-color: #b4d6bd;
      display: block;
      padding: 10px;
    }
    li {
      float: right;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#Course">Course</a></li>
    <li><a href="#Help">Help</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#branch">Branch 1</a></li>
  </ul>
</body>
</html>

Horizontal Navigation Bar Creation Step3

Example
<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #5b5c5b;
    }
    li {
      float: left;
    }
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 12px 14px;
      text-decoration: none;
    }
    li a:hover:not(.active) {
      background-color: #868f88;
    }
    .active {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#Course">Course</a></li>
    <li><a href="#Help">Help</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#branch">Branch 1</a></li>
  </ul>
</body>
</html>

Horizontal Navigation Bar Creation Step4

Example
<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #5b5c5b;
    }
    li {
      float: left;
      border-right:1px solid #bbb;
    }
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 12px 14px;
      text-decoration: none;
    }
    li a:hover:not(.active) {
      background-color: #868f88;
    }
    .active {
      background-color: green;
    }
  </style>
</head>
<body>
  <h3>Insert border</h3>
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#Course">Course</a></li>
    <li><a href="#Help">Help</a></li>
    <li><a href="#about">About</a></li>
   <li><a href="#branch">Branch 1</a></li>
 </ul>
</body>
</html>

Horizontal Navigation Bar Creation Step5

Example
<!DOCTYPE html>
<html>
<head>
  <style>
    body {margin:0;}
    li {
      float: left;
    }
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    li a:hover:not(.active) {
      background-color: #052d73;
    }
    .active {
      background-color: #4CAF50;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #010e24;
      position: fixed;
      top: 0;
      width: 100%;
    }
  </style>
</head>
<body>
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#Course">Course</a></li>
    <li><a href="#Help">Help</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#branch">Branch 1</a></li>
  </ul>
  <div style="padding:20px;margin-top:30px;background-color:#c7ebd1;height:1600px;">
    <h2>Fixed Top Navigation Bar</h2>
    <h3>This is Scrollable page kindly scroll to see the effect</h3>
 
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
  <p>Write the Some text some in this paragraph.</p>
</div>
</body>
</html>
English Hindi