MultiLevel DropDown Floating Menu WithOut J-Query (Only HTML-CSS)

I’ve had a few requests from readers asking how to install a dropdown menu without j-query due to heavy load. So here it is, a multi level dropdown/flyout menu. The original code is from CSSPlay. I modified the CSS part a little to adapt to Blogger template. This four level dropdown/flyout menu should work in most browsers. A tab with small caps indicates it has upper level/levels. A dropdown/flyout will appear when you hover the tab.

Installing The Menu:

First Have A Look On Image Or See The Demo Above

Click On The Image To Zoom It

Go to "Edit HTML".
Find </head> Tag And Copy-Past The Below Code Just After It.

HTML Code

<!-- Dropdown HTML Menu Start -->
<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Email</a></li>
<li><a href="#url">Telephone</a></li>
<li><a href="#url">Online Form</a></li>
<li><a href="#url">Snail Mail Address</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Ski Hire Facilities</a></li>
<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Beginners Slopes</a></li>
<li><a href="#url">Intermediate Slopes</a></li>
<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Local</a></li>
<li><a href="#url">Nearby</a></li>
<li><a href="#url">With instructor</a></li>
<li><a href="#url">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Night Life</a></li>
<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">From Airport</a></li>
<li><a href="#url">In Resort</a></li>
<li><a href="#url">Multiple Resorts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>
<li><a href="#url">Places of interest</a></li>
<li><a href="#url">National parks &amp; Museums</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
<li class="level1-li"><a class="level1-a" href="#url">About Us</a></li>
<li class="level1-li"><a class="level1-a" href="#url">Contact Us</a></li>
<li class="level1-li"><a class="level1-a" href="#url">SiteMap</a></li>
<li class="level1-li"><a class="level1-a" href="#url">Official Website</a></li>
<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Money Exchange</a></li>
<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>
<li><a href="#url">Ski Wear</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Ski Schools</a></li>
<li><a href="#url">Snow Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Austrian</a></li>
<li><a href="#url">German</a></li>
<li><a href="#url">French</a></li>
<li><a href="#url">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Short Breaks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
</div>
<!-- Dropdown HTML Menu End -->

Than Again Find ]]></b:skin> And Copy-Paste The Below Code Just Above It.

CSS Code 

#menu { background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec,  #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba);
                height:35px;; text-align:center; position:fixed; z-index:20; right: 0%; left: 0%;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {clear:both;float:none;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
#menu ul.level1 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu ul.level2 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level3 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level4 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 14px Arial; color:#fff; line-height:35px; text-decoration:none;padding:0px 15px 0 15px;outline:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:35px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-35px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:30px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:30px;}
#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu li:hover > a,
#menu ul li:hover > a.fly {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}
.main-outer {z-index:10;}/*for IE*/
.tabs-outer {z-index:11;}/*for IE*/

Click Save Template And Enjoy.If You Have Any Error Please Contact Me.

Don't Forget To Say Thanks

Read More ...

Simple Stylish Blue Hover Style Page Navigation Menu In Blogger

Hi Now add this special blue hover effect page navigation menu in blogger.

PREVIEW HERE:-

Follow simple and easy step to adding this special menu below your blogger Header--->>>

* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger template.
* Now find this code ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>


#nav-left{float:left; display:inline; width:750px; padding-left:0; padding-top:11px} #nav{clear:both; margin:0 auto} #nav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px} #nav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:30px; display:inline;} #nav ul li a, #nav ul li a:visited{text-decoration:none;border:0px solid #000000; margin:0 1px 0 0; float:left; padding:8px 9px; color:#fff; font-weight:bold; font-size:12px;margin-top:-2px; background:#333333; border-radius:4px 4px; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0} #nav ul li a:hover{border:2px solid #111; background:#3399FF top left repeat-x; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px} #nav ul li a.current, #nav ul li a.current:visited, a:hover {text-decoration:none;} a img {border-width:0;} #hb{height:40px;margin-bottom:10px; margin-top:50px; background:#333333; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px} #nav-element{width:1000px; margin-top:-24px; padding:0} #nav-right{float:right; display:inline; width:200px; padding-top:9px; padding-right:3px} #tsrc-m #src-m{margin-top:0px;margin-left:-20px; background-color:#FFFFFF; border:1px solid #000000; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}#tsrc-m #s-m{margin-top:-1px;width:176px} #src-m input{border:0; background:none; color:#777}


* Now click to save your blogger Template.

* Now again go to blogger Dashboard .
* And click in design tab and now you are here--->>> Page element.
* Click in add Gadget which is below blogger header.
* When open new window click in HTML/javascript from list.
* When open new blank box copy below code and paste in blank box.


<!-- Start Menu -->

<div id='hb'> <div id='nav-element'> <div id='nav-right'> <div id='tsrc-m'> <div id='src-m'> <form action='/search' id='searchform' method='get' name='searchform'> <input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/> <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmeLbAHJxm2jN6IXxpWrpxazQ7JSWVrLoa6fihMlZL9QMDpE3k4nWBugyOFx5f3G0izCj-Y1NvFAIL4gF7ouroh4PY90L5kNRzYnDc_nZ8Q-Y_FONLkDDuQKdMbL2yVPfR3qGKWl7I2Dpp/s1600/search.gif' style='border: 0pt none; vertical-align: top; padding-top: 3px;' type='image'/> </form> </div> </div> </div>

<!--TOP MENU SETTING-->

<div id='nav-left'>

<div id='nav'>

<ul>

<li class='current'> <a class='current' href='/'>HOME</a> </li>

<li> <a href='TAB1 LINK HERE'>TAB1 TITLE HERE</a> </li> 

<li> <a href='TAB2 LINK HERE'>TAB2 TITLE HERE</a> </li> 

<li> <a href='TAB3 LINK HERE'>TAB3 TITLE HERE</a> </li> 

<li> <a href='TAB4 LINK HERE'>TAB4 TITLE HERE</a> </li> 

<li> <a href='TAB5 LINK HERE'>TAB5 TITLE HERE</a> </li> 

</ul>

<script language='javascript'>setPage()</script>

</div>

</div> 

<!-- END TOP MENU SETTING-->

</div>

</div>

<div class='clear'></div> <div id='crosscol-wrapper' style='text-align:center'> <div class='crosscol section' id='crosscol'>

</div>

</div> 

<!-- End Menu -->

NOTE:- Change Highlighted text in above code with your own ok.

* Now click to save your HTML/Javascript and now you are done my friend.

Now One More Design Specially For You

Click Here

Read More ...

How To Add Animated Stylish Navigation Menu With Jquery To Blogger

Animated Fancy Navigation Menu with Jquery for Blogger. Every One has trying to add a beautiful menu with animation effect by jquery to their Blogger Blogs. But it has very difficult to add a menu to blogger blogs. here is Way2Blogging has make it as simple and is like 1, 2, 3...

This menu is designed by Sohtanaka

Features:-
1. Simple and Easy to Installation
2. Nice Animation Effect and awesome look
3. Easy to add Links and use.

Watch Live Demo On This Blog

How to Install?

1. Go to Blogger Dashboard > Design tab.
2. Click on Add a Gadget any where in your Layout.
3. Choose LinkList Gadget and Leave Title Field as Blank
4. Try to Add Some Links and Save Gadget

5. Edit LinkList Widget Once again, And Copy Widget ID From URL like in Image

Make Sure the ID may Exact to match in the URL even a Block Letters(Capital Letters) Also for Perfect Working of This Widget!

http://www.blogger.com/rearrange?blogID=xxxxxx&action=editWidget& 

sectionId=xxxx&widgetType=LinkList&widgetId=LinkList2

Here is LinkList2 is the widget ID in this URL

6. Use the below Form and Generate your Widget Code then Paste it before </head> tag in your template.

For CSS Generator Form Click Here

Read More ...

Stylish Hover Page HTML-CSS Navigation Menu For Blog And Website

One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog.

Features:
1. Simple and very easy to add.
2. Menu with mouse hover effect and awesome look.
3. Easy to add Links and use.

How To Add Navigation Menu To Blogger/Blogspot?
1. Go to Blogger Dashboard by clicking here >Design >Edit HTML
2. Copy the below code and paste before </head>
CSS Code:
<style type='text/css'>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 99%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvl5-1FtX29p6znPRp9yNQf4N_khfy69K3yh8JPs8oz-7CyLt5yWv3UiXBnaV0zsd-_ksY-wqIfvS45oFeoeoNk4W6ffiqYK-Ob2EodpfMNSwpMd_0c0ekbx2dsomA86EYVGvRvhwBbWU/s1600/menu-bg-b-w.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvl5-1FtX29p6znPRp9yNQf4N_khfy69K3yh8JPs8oz-7CyLt5yWv3UiXBnaV0zsd-_ksY-wqIfvS45oFeoeoNk4W6ffiqYK-Ob2EodpfMNSwpMd_0c0ekbx2dsomA86EYVGvRvhwBbWU/s1600/menu-bg-b-w.png) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag
$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});
$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});
});
</script>


4. Then click SAVE TEMPLATE
5. Once again go to Design tab >Page Elements >Add Gadget > HTML/Java Script
6. Copy the below code and paste it

HTML Code:
<div class="container">
<ul id="topnav" class="v2"><center>
<li><a href="#">Home</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact us</a></li>
</center>
</ul>
</div>


Important :- Replace # with your Link and change title your wish.. Save it.

Read More ...

HTML-CSS Stylish Page Navigation Bar For Blog And Website

We are comeback with another simple Navigation menu made up of CSS3 with additional effects using CSS3 Transition property. CSS Transitions make, powerful effect without the use of JavaScript for many common effects. This menu perfectly work only on some browser such as Chrome, Firefox, and Safari. Here we using simple CSS only.

HTML:

Here is the basic HTML code for this navigation menu.

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>

Now you will see like underneath of link without any style and background color. (see image below)

CSS:

Now we are going to give color, border and other things to the underneath of link above. Following are CSS code. If you are blogspot users, then add following code before ]]></b:skin> 

#nav {
float: left;
font: bold 13px Arial, Helvetica, Sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
overflow: hidden;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav ul li {
float:left;
}
#nav ul li a {
float: left;
color:#000;
padding: 10px 15px;
text-decoration:none;
background:#ff9d36; -webkit-transition: all 1s linear;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px px 1px rgba(0,0,0,0.4);
}
#nav ul li a:hover {
color: #fff; -webkit-transition: all 1s linear;
background:#220077; -webkit-transition: all 1s linear;
}

That's it.

Read More ...