How To Create Drop Down Menu For Blogger Using Just Css

You Are always try to make your blog Attractive and Imparacive...
Today We learn how to make Drop Down Menu for Blogger To make your blog impresive n attractive....
 This menu uses the more conventional style of a vertical drop down to display links.It has a large bold red on grey color scheme that stands out and looks great.As with the last menu it's built purely from Css using just two images.Below you can see the screenshot and a live demo to see it in action.


Live Demo :-

How To Create Drop Down Menu For Blogger Using Just Css

• First Go To Blogger Darshboard ----> Design -----> Edit HTML

• Mark On Expand Widget Tamplets

• Ctrl + F to find ]]></b:skin>

• Copy and Paste below Code just above/before ]]></b:skin>

/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUlns-JRrvOG1Gbd44-LuoJCOWmsQCbA1RJ87KQg18Eno2EWjkYleakUh5ycNjYZSDh6mwGUGzpWzm_Xo1wb1J40Otwn1lX2aMgy-ecl2PxrR7ayaJ-_BELwsJZC_9MnOVb9CM0S6gx6C/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd65ofStF6IgYpOV5cc8DjkTQzrsg5dO2TlP8qOfVZjOFjSe2bgyPE7nC1oMuipfu92HlHvummxPi-s4slNUFnnhrWFH7Yepo18q-QbMWCkqsOzu2xF_TM98oUeIcnDkYwSjOa0W2PqDj1/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu from http://www.cutehearthacker.blogspot.com*/

• Save your Template.

That's the Css added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.

 

• Go to Design----> Page Elements---->Add a Gadget

• Choose HTML/Javascript from the list

• Now Copy And Paste Below Code in It..

<div class="menu">

<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

• Now Save HTML/Javascript and You Have done....