Why do you run scripts such as jQuery while you can use simple CSS and HTML to create beautiful drop down menus for your blog.Here I have created a simple and beautiful CSS Multi level drop down menu with using purecssmenu.This menu is also compatible with Internet Explorer 6.Coding for each blog is diffrent so here I am only giving CSS and HTML code.So as per your blog coding you can add this in your blog.If you want some help from me then surely drop your comment with your blog URL.I'll glad to help you.Now lets go to the CSS part.


CSS Part


  • You can add this css above ]]></b:skin>

#pcm{display:none;}

ul.pureCssMenu ul{display:none}

ul.pureCssMenu li:hover>ul{display:block}

ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}

ul.pureCssMenu,ul.pureCssMenu ul {

margin:0px;

list-style:none;

padding:0px 3px 3px 0px;

background-color:#414141;

background-repeat:repeat;

border-color:#CECECE;

border-width:4px;

border-style:ridge;

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

display:block;

zoom:1;

position:absolute;

z-index: 1000;

left: 100;

top: 200;

}

* HTML ul.pureCssMenu {position:absolute}

ul.pureCssMenu ul{

width:103.95px;

}

ul.pureCssMenu li{

display:block;

margin:3px 0px 0px 3px;

font-size:0px;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

display:block;

vertical-align:middle;

background-color:#414141;

border-width:1px;

border-color:#414141;

border-style:solid;

text-align:left;

text-decoration:none;

padding:4px;

_padding-left:0;

font:14px Verdana;

color: #FFFFFF;

text-decoration:none;

cursor:pointer;

}

ul.pureCssMenu span{

overflow:hidden;

}

ul.pureCssMenu li {

float:left;

}

ul.pureCssMenu ul li {

float:none;

}

ul.pureCssMenu ul a {

text-align:left;

white-space:nowrap;

}

ul.pureCssMenu li.sep{

text-align:left;

padding:0px;

line-height:0;

height:100%;

}

ul.pureCssMenu li.sep span{

float:none; padding-right:0;

width:3;

height:100%;

display:inline-block;

background-color:#CECECE; background-image:none;}

ul.pureCssMenu ul li.sep span{

width:100%;

height:3;

}

ul.pureCssMenu li:hover{

position:relative;

}

ul.pureCssMenu li:hover>a{

background-color:#A3A3A3;

border-color:#FFFFFF;

border-style:solid;

font:14px Verdana;

color: #FFFFFF;

text-decoration:none;

}

ul.pureCssMenu li a:hover{

position:relative;

background-color:#A3A3A3;

border-color:#FFFFFF;

border-style:solid;

font:14px Verdana;

color: #FFFFFF;

text-decoration:none;

}

ul.pureCssMenu li.dis a {

color: #AAAAAA !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;

height:24px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def  {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}

ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}

ul.pureCssMenu span{

display:block;

background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif);

background-position:right center;

background-repeat: no-repeat;

padding-right:14px;}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}

ul.pureCssMenu ul li:hover > a span{ background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif);}

ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}

ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}

HTML Part


<ul class="pureCssMenu pureCssMenum">

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Home</a></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank"><span>Link</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="pureCssMenu">

  <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Sub Links 1</a></li>

  <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Sub Links 2</a></li>

  <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Sub Links 3</a></li>

 </ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Data</a></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">About</a></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Contact</a></li>

</ul>


  • If you want to add more tabs then use <li>.......</li> as used in first link ( <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Home</a></li> )
  • If you want to add sub tab then use <ul class="pureCssMenu"> <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Sub Links 2</a></li> </ul>

Post a Comment

  1. Hello! Thanks for posting this. O have a problem:
    I can manage to put in the Html part. Then I get the menu points but the drop down sub-menus don't appear.
    I wanted to avoid usind CSS, so that the menu bar stays in the style I created previously for another menu bar, which it does. But why does the sub-menus don't work?

    ReplyDelete
  2. @Bastien Anderie-Meyer - You can't avoid the CSS part.That's the main part of menu....

    ReplyDelete
  3. Common man, none of your things are working, and why are you need of credits?? Read more - ???
    I just don't understand, if you don not want to help, why have you written helper blogger . com
    Try to get a more professional approach please ..

    ReplyDelete
  4. where i put the html code in html of blog?

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top