How To Add CSS Drop Down Menu To Blogger New

CSS Drop Down menu uses the more conventional style to display vertical drop down links. It has a large bold red on grey color scheme that stands out and gives a great look.
In this CSS tutorial will help you on how to add this greate css style drop down menu to blog. First we are going to add CSS part then we will add HTML part of drop down menu. Its is very easy to setup on blog.

1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML.

3. Now click on Expand Template Widgets check box.

4. Search for below code in your HTML Template.

]]></b:skin>

5. Copy and paste the following code Directly Above / before ]]></b:skin>

/* Start Red Css Drop Down Menu by http://www.webtrickz.in */
.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/AVvXsEjcvYRtx-yeTtpoPr6BXndMR4habR5hyphenhyphenSAlHYcRlASxpVZzy3eqXedTH9JpCZRynyCtJUz2v2oz7WGVteZQP6VOE4Bfy_eftl37SuivFtRRxGss7NAvj_vW_w3-ckllYHDI-WxDTMRu-_vG/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/AVvXsEh5Y6Vj8JQoXvTT3a66G5jzdbHHBo-kY-hJQWzIdQMFmlS7w4Nqbmd_Lfg64Kna8A71o_jH9x_j75YP6TlZmSKQMw4qV3weVYxP02OvLMI18RwQORSLrOBLk78eB-8I-CQeO0T8hjIn1jCT/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/* End Red Css Drop Down Menu by http://www.webtrickz.in */

5. Save your template.

How To Add Red HTML Code Drop Down Menu To Blog

1. Go to your Design tab ---> Page Elements tab.

2. Click on "Add a Widget" then select "HTML/Javascript" Widget.

3. Copy and paste the following code into the Html/Javascript Widget.

<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.php">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/contact.php">Contact</a></li>
</ul>
</div>

4. Save your widget.

Customization Of Red CSS Drop Down Menu

1. Anchor Links: Remove "#" with your own link URL.

2. Anchor Text: Replace text with your text.