How to create a Nav bar using HTML and CSS?

<!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="http://rbwebsoluitons.in">Home</a></li>
  <li><a href="http://rbwebsoluitons.in">News</a></li>
  <li><a href="http://rbwebsoluitons.in">Contact</a></li>
  <li><a href="http://rbwebsoluitons.in">About</a></li>
</ul>

</body>
</html>

Example explained:

  • float: left; – use float to get block elements to slide next to each other
  • display: block; – Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
  • padding: 8px; – Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good
  • background-color: #dddddd; – Add a gray background-color to each a element
Please follow and like us:
error

Leave a Comment

Your email address will not be published. Required fields are marked *

RSS
Follow by Email
Facebook
Twitter