<!DOCTYPE html>
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;

  <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>


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:


Leave a Reply

Avatar placeholder

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

Follow by Email