How To Add Red CSS Drop Down Menu To Blogger



This Red colored 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.

Working Demo: Click Here

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

2. Now click on Expand Template Widgets check box.

3. Search for below code in your HTML Template

]]></b:skin>

4. Copy and paste the following code Directly Above / before

/* Start Red Css Drop Down Menu by http://www.all-blogger-tools.blogspot.com */
.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(http://3.bp.blogspot.com/-jEZvPu90bIA/TjlATeBIGoI/AAAAAAAAE4A/shxxdvs2fHI/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(http://1.bp.blogspot.com/-NjNjSmAlq34/TjlATMvGF7I/AAAAAAAAE38/UxPs9Qg4Fyg/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
/* End Red Css Drop Down Menu by http://www.all-blogger-tools.blogspot.com */
5. Save your template.


Now let's add the drop down menu code:


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</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>

4. Save your widget.


Remplace  "#" with your own link URL

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes