Grow Horizontal Menu With hover Effect

I already give you color navigation menu for blogger that was awesome now i wil give you growing menu,When the mouse hover on the menu, it will increase the height and width of menu, making as stylish and attractive.

Live Demo

This menu is made with the help of-

• Css
• Html
• JavaScript 

But I converted all code in single code by which it will become easy for you to install it.

Adding Navigation Menu

To Add This Menu To Blogger Just Copy The Following code And Paste it in HTML/JAVASCRIPT .

<ul class="hor-nav">
<li><a href="#### ">Home</a></li>
<li><a href="#### ">Contact Us</a></li>
<li><a href="#### ">About Us</a></li>
<li><a href="#### ">Advertise</a></li>
<li><a href="####">Blog</a></li>
<li><a href="####">Privacy</a></li>
</ul>

<style>
.hor-nav li {
list-style: none; float:center;}
.hor-nav li {
float: left;
padding-top:10px; padding-bottom:20px;}
.hor-nav li a {
font-family: 'Righteous', cursive;
font-size:17px;
text-decoration:none;
float:center;
position: relative;
display: block;
padding: 14px 25px;
border-bottom: 8px solid #ccc;
background: #f4f4f4; color: #999;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out; }
.hor-nav li a:hover {
text-decoration:none;
color: #000; background: #fff;
border-color: #000;
padding: 25px; top: -14px; }
.hor-nav li .active a, .nav li .active a:hover {
background: #444; color: #fff;
border-color: #000; }
</style>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Righteous::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

Customization

In the HTML section, just replace the #### with your page link..