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