How to create HTML Menu With Hover

How to create HTML Menu With Hover

HTML Menu

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.

[sourcecode language=”plain”]

<div class="menu">
<ul>
<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>
</ul>
<div class="specer"></div>
</div>

[/sourcecode]

This is CSS Code.

[sourcecode language=”plain”]

.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 a.active{background:#e5841c; }
.menu ul li a:hover{ background:#e5841c;}

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

[/sourcecode]

=============================================================

See Video how to create menu.

 

Saurav Sen

Saurav Sen

Hi, I am a professional blogger and web developer. So I also share experiences with web development tutorials and blogging tips and including writing about HTML, CSS, JavaScript, Jquery, Ajax, PHP, and MySQL.