Hello friends now I am going to share you how to create a CSS steps down menu in blogger. I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work!
How to create a drop down menu in blogger?
A
drop down menu is needed when you have too much content on your blog or
you love keeping things organized. To add a drop down menu to your
blogger blogs do this:
- Go To Blogger > Layout
2. Select a HTML/JavaScript Widget just under the header and paste the following code inside it,
<div id='cdbnavbar'>
<ul id='cdbnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>
<ul id='cdbnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>
Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before</li>
To add another tab just paste this code above</ul>
<li>
<a href='#>Tab Name</a>
</li>
3. Now Go to Design > Edit HTML
4. Backup your template and search for ,
]]></b:skin>
5. Just above it paste the code below,
/*----- CDB Drop Down Menu ----*/
#cdbnavbar {
background: #060505
; width: 1000px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid
#960100; height:35px;
}
#cdbnav {
margin: 0
; padding: 0;
}
#cdbnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#cdbnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid
#333;
border-right:1px
solid #333;
height:35px;
}
#cdbnav li a, #cdbnav
li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px
Helvetica, sans-serif; margin: 0;
padding: 9px 12px
10px 12px;
text-decoration:
none;
}
#cdbnav li a:hover,
#cdbnav li a:active {
background: #018EEB;
color: #FFF;
display: block;
text-decoration:
none;
margin: 0;
padding: 9px 12px
10px 12px;
}
#cdbnav li {
float: left;
padding: 0;
}
#cdbnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#cdbnav li ul a
{ width: 140px;
}
#cdbnav li ul ul {
margin: -25px 0 0
161px;
}
#cdbnav li:hover ul
ul, #cdbnav li:hover ul ul ul, #cdbnav li.sfhover ul ul, #cdbnav li.sfhover ul
ul ul {
left: -999em;
}
#cdbnav li:hover ul,
#cdbnav li li:hover ul, #cdbnav li li li:hover ul, #cdbnav li.sfhover ul,
#cdbnav li li.sfhover ul, #cdbnav li li li.sfhover ul {
left: auto;
}
#cdbnav li:hover,
#cdbnav li.sfhover {
position: static;
}
#cdbnav li li a,
#cdbnav li li a:link, #cdbnav li li a:visited {
background: #060505;
width: 120px;
color: #FFF;
display: block;
font:normal 12px
Helvetica, sans-serif;
margin: 0;
padding: 9px 12px
10px 12px;
text-decoration:
none;
z-index:9999;
border-bottom:1px
dotted #333;
}
#cdbnav li li
a:hover, #cdbnavli li a:active {
background: #018EEB;
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px
10px 12px;
text-decoration:
none;
}
Make these changes:
Change #060505 to change background color of the Main menu
Change the Red highlighted text to change font color, size and family
Change #018EEB to change the background of a tab on mouse hover
Change #018EEB to change the background color of the drop down menu
Change #018EEB to change the background color of drop down menu on mouse hover
6. Save your template and you are done! Visit your Blogs to see a beautiful Navigation menu just below Header. Have Fun! :) If you have any questions feel free to post them.
