Educational

Navigation Menu

Written by

Saim Khalid

in

<!DOCTYPE html>
<html>
<head>
  <style>

ul {
  list-style-type: none;
  background: #333;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  padding: 14px 20px;
  text-decoration: none;
}
li a:hover {
  background: #111;
}
  </style>
</head>
<body>
  <ul>

&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  </ul>
</body>
</html>

Explanation:

  • A horizontal navbar using ul + li.
  • hover effect changes background color when mouse is over.

Comments

Leave a Reply

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

More posts