How to create HTML Menu With Hover

How to create HTML Menu With Hover


This HTML Menu is five tab. Default Hover is HOME tag. You can change this Hover. Cut  (class=”active”) and paste other HTML tag. When is tag hover active.

This is HTML Code.

<div class="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">VISION & MISSION</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">contact</a></li>
<div class="specer"></div>

This is CSS Code.

.menu{ padding:5px 0 0 0;}
.menu ul{ float:left; list-style-type:none;}
.menu ul li{ float:left; border-left:solid 1px #4b5458; font:normal 16px/45px oswald ; text-transform:uppercase;}
.menu ul li a{ text-decoration:none; color:#FFFFFF; padding:0 20px; display:block;}
.menu ul li{background:#e5841c; }
.menu ul li a:hover{ background:#e5841c;}

.specer{padding:0; margin:0; clear:both; }


See Video how to create menu.