Add CSS3 Drop Down Menu Without Any Scripts and Images To Blogger

Wanna more attractive look of your blog? Drop down menu helps you to increases your blog look.Visitors can easily navigate through your blog. Today you’ll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. This is one of my favorite drop down menu. Let’s see how is made:

This excellent menu is created by Catalin Rosu without using any images or scripts, only minimal HTML markup and CSS3 used.

CSS3 Drop Down Menu Screenshot

CSS3 Drop Down Menu Live Demo

Live Demo

How To Add CSS3 Drop Down Menu In Blogger Blog

• Go to Blogger Dashboard --> Layout --> Add A Gadget --> HTML/JAVASCRIPT
• Now Paste The Code Shown Below Inside It

<style>
#menu
{
 width: 100%;
 margin: 0;
 padding: 10px 0 0 0;
 list-style: none;
 background: #111;
 background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 background: -webkit-linear-gradient(#444, #111);
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-border-radius: 50px;
 border-radius: 50px;
 -moz-box-shadow: 0 2px 1px #9c9c9c;
 -webkit-box-shadow: 0 2px 1px #9c9c9c;
 box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
 float: left;
 padding: 0 0 10px 0;
 position: relative;
 line-height: 0;
}
#menu a
{
 float: left;
 height: 25px;
 padding: 0 25px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px/25px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
 color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
 color: #fafafa;
}
#menu li:hover > ul
{
 display: block;
}

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;  
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;  
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);  
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#menu ul ul
{
  top: 0;
  left: 150px;
}
#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;  
}
#menu ul a
{  
    padding: 10px;
 height: 10px;
 width: 130px;
 height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
 text-transform: none;
}
*html #menu ul a /* IE6 */
{  
 height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{  
 height: 10px;
}
#menu ul a:hover
{
    background: #0186ba;
 background: -moz-linear-gradient(#04acec,  #0186ba);
 background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background: -webkit-linear-gradient(#04acec,  #0186ba);
 background: -o-linear-gradient(#04acec,  #0186ba);
 background: -ms-linear-gradient(#04acec,  #0186ba);
 background: linear-gradient(#04acec,  #0186ba);
}
#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec;
    border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
#menu:after
{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Graphic design</a></li>
    <li><a href="#">Development tools</a></li>
    <li><a href="#">Web design</a></li>
</ul>
 </li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

• Replace The Bolded Text With Your Page Titles and Replace The Hash Sign (#) With Respective URL's. 
• Now Save Your Template & Its Done..!!