Superb CSS Menu For Bloggers

Posted by Lasantha Bandara on November 24th, 2009 File Under : css6 Comments

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu a:hover {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu li:hover ul {
left: auto;
display: block;
}

#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

Note:please host catmenu.jpg and catmenuhov.jpg images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='#' title='#'>Home</a></li>

<li><a href='#' title='#'>Web Design</a>
<ul class='children'>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>JavaScript</a></li>
</ul>
</li>

<li><a href='#' title='#'>Templates</a>
<ul class='children'>
<li><a href='#' title='#'>1 Column</a></li>
<li><a href='#' title='#'>2 Column</a></li>
<li><a href='#' title='#'>3 Column</a></li>
<li><a href='#' title='#'>4 Column</a></li>
</ul>
</li>

<li><a href='#' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='#' title='#'>Email</a></li>
</ul>
</li>

<li><a href='#' title='#'>News</a></li>

<li><a href='#' title='#'>Google</a>
<ul class='children'>
<li><a href='#' title='#'>Yahoo</a></li>
<li><a href='#' title='#'>MSN</a></li>
</ul>
</li>

<li><a href='#' title='#'>About</a></li>

<li><a href='#' title='#'>Contact</a></li>

<li><a href='#' title='#'>PrivacyPolicy</a></li>

</ul>

</div>

</div>

You are done.It will look like this:

Superb CSS Menu For Bloggers

Demo

File Under : css

Related Posts

6 Responses to “Superb CSS Menu For Bloggers”

  1. PiperLee Photography says:

    How do I get the links to work? Where do I put the links in for my own stuff?

  2. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Replace # with your Link.Look at the example below:

    <li><a href='http://www.bloggertipandtrick.net/search/label/HTML?max-results=1000' title='HTML Tutorials'>HTML</a></li>

  3. Animunu says:

    thank u

  4. bokute says:

    I do as instructed but it does not display the submenu, help me!

  5. bokute says:

    I do as instructed but it does not display the submenu, help me!

  6. fun99 says:

    It's not displaying the Sub-menu!have I done anything wrong?

Leave a Reply