Horizontal Navigation Bar Example

                                              Navigation Bar Example

Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:

steps:

1st. Open Notepad

2nd. type the following in notepad:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background-color: #333;

}

li {

  float: left;

}

li a {

  display: block;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}

li a:hover {

  background-color: #111;

}

</style>

</head>

<body>

<ul>

  <li><a class="active" href="#home">Home</a></li>

  <li><a href="#news">News</a></li>

  <li><a href="#contact">Contact</a></li>

  <li><a href="#about">About</a></li>

  <li><a href="#about">Questions</a></li>

 <li><a href="#about">Format</a></li>

 <li><a href="#about">How To</a></li>

 <li><a href="#about">Begin With</a></li>

 <li><a href="#about">Start</a></li>

</ul>

</body>

</html>

3rd. save it (CTRL + S)

then the Dialog Box Appear Save it using (Name what you want)then type next to it like this → .html 

4th. open it and it will appear like this: