Add CSS Drop Down Menu Bar for Your Blog: Green Nature Theme
A drop down menu is extremely useful when you want your visitors to navigate through various categories & sub categories. Menu bar makes your site organized & presentable.In my previous article How to add professional CSS navigational menu bar , i wrote about how can you add professional horizontal menu bar & someone asked me if is it possible to add the drop down for the same. Yes, it is possible. It was easy to create drop downs for the same but i decided to create something better and i am very happy to post my first drop down menu bar. I have named the theme as Green Nature drop down menu theme.
Green looks soothing and really makes me happy and that's why i have created my first drop down in green.
How to add Green Nature Drop Down ?
Step 1: Go to Blogger >> Template >> Edit HTML
Step 2: Add following code in the template wherever you want your menu bar to appear.
<ul class="dropdown">
<li><a href="link1"><span>Title1</span></a></li>
<li><a href="link2"><span>Title2</span></a>
<ul>
<li><a href="Sub Link1">Sub Link1</a></li>
<li><a href="Sub Link2">Sub Link2</a></li>
<li><a href="Sub Link3">Sub Link3</a></li>
</ul>
</li>
<li><a href="link3"><span>Title3</span></a></li>
<li><a href="link4"><span>Title4</span></a></li>
<ul>
<li><a href="Sub Link1">Sub Link1</a></li>
<li><a href="Sub Link2">Sub Link2</a></li>
</ul>
<li><a href="link5"><span>Title5</span></a></li>
</ul>
Replace link1 by your first link (ex. http://www.google.com) and title by your title (ex. this is Google!!). You can add more links in the same manner.
Step 3: Press 'Ctrl+f' key and serch ']]></b:skin>'
Step 4: Please add the following code just before ]]></b:skin>
.dropdown{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% Georgia;
font-size:17px;
font-weight:bold;
}
.dropdown ul{
background:url(http://img708.imageshack.us/img708/8938/menuule.png) repeat-x;height:40px;
height:38px;
list-style:none;
margin:0;
padding:0;
}
.dropdown li{
float:left;
padding:0px;
}
.dropdown li a{
background:url(http://img708.imageshack.us/img708/8938/menuule.png) repeat-x;height:38px;
color:#cccccc;
display:block;
font-weight:normal;
line-height:42px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.dropdown li a:hover, .dropdown ul li:hover a{
background: url(http://img832.imageshack.us/img832/9115/menulihovery.png) repeat-x;height:38px;
color:#FFFFFF;
text-decoration:none;
}
.dropdown li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.dropdown li:hover ul{
display:block;
}
.dropdown li li {
background:url(http://img687.imageshack.us/img687/3765/menulili.png) repeat-x;height:38px;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.dropdown li:hover li a{
background:none;
}
.dropdown li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.dropdown li ul a:hover, .dropdown li ul li:hover a{
background:url(http://img268.imageshack.us/img268/5686/menuliulhover.png) repeat-x;height:38px;
border:0px;
color:#ffffff;
text-decoration:none;
}
.dropdown p{
clear:left;
}
Step 5: Your code should look like this..
<!-- Add your Green Nature Drop Down Code Here --> ]]></b:skin>
Step 6: Save the template now and take a look at your blog.
Add CSS Drop Down Menu Bar for Your Blog: Green Nature Theme
A drop down menu is extremely useful when you want your visitors to navigate through various categories & sub categories. Menu bar makes your site organized & presentable.In my previous article How to add professional CSS navigational menu bar , i wrote about how can you add professional horizontal menu bar & someone asked me if is it possible to add the drop down for the same. Yes, it is possible. It was easy to create drop downs for the same but i decided to create something better and i am very happy to post my first drop down menu bar. I have named the theme as Green Nature drop down menu theme.
Green looks soothing and really makes me happy and that's why i have created my first drop down in green.
How to add Green Nature Drop Down ?
Step 1: Go to Blogger >> Template >> Edit HTML
Step 2: Add following code in the template wherever you want your menu bar to appear.
<ul class="dropdown">
<li><a href="link1"><span>Title1</span></a></li>
<li><a href="link2"><span>Title2</span></a>
<ul>
<li><a href="Sub Link1">Sub Link1</a></li>
<li><a href="Sub Link2">Sub Link2</a></li>
<li><a href="Sub Link3">Sub Link3</a></li>
</ul>
</li>
<li><a href="link3"><span>Title3</span></a></li>
<li><a href="link4"><span>Title4</span></a></li>
<ul>
<li><a href="Sub Link1">Sub Link1</a></li>
<li><a href="Sub Link2">Sub Link2</a></li>
</ul>
<li><a href="link5"><span>Title5</span></a></li>
</ul>
Replace link1 by your first link (ex. http://www.google.com) and title by your title (ex. this is Google!!). You can add more links in the same manner.
Step 3: Press 'Ctrl+f' key and serch ']]></b:skin>'
Step 4: Please add the following code just before ]]></b:skin>
.dropdown{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% Georgia;
font-size:17px;
font-weight:bold;
}
.dropdown ul{
background:url(http://img708.imageshack.us/img708/8938/menuule.png) repeat-x;height:40px;
height:38px;
list-style:none;
margin:0;
padding:0;
}
.dropdown li{
float:left;
padding:0px;
}
.dropdown li a{
background:url(http://img708.imageshack.us/img708/8938/menuule.png) repeat-x;height:38px;
color:#cccccc;
display:block;
font-weight:normal;
line-height:42px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.dropdown li a:hover, .dropdown ul li:hover a{
background: url(http://img832.imageshack.us/img832/9115/menulihovery.png) repeat-x;height:38px;
color:#FFFFFF;
text-decoration:none;
}
.dropdown li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.dropdown li:hover ul{
display:block;
}
.dropdown li li {
background:url(http://img687.imageshack.us/img687/3765/menulili.png) repeat-x;height:38px;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.dropdown li:hover li a{
background:none;
}
.dropdown li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.dropdown li ul a:hover, .dropdown li ul li:hover a{
background:url(http://img268.imageshack.us/img268/5686/menuliulhover.png) repeat-x;height:38px;
border:0px;
color:#ffffff;
text-decoration:none;
}
.dropdown p{
clear:left;
}
Step 5: Your code should look like this..
<!-- Add your Green Nature Drop Down Code Here --> ]]></b:skin>
Step 6: Save the template now and take a look at your blog.