A Very Simple jQuery Drop Down Menu Plugin

This is a very simple jquery Drop Down Menu Plugin, vertically no doubt. Add latest jQuery in your html like:

[html]

[/html]

[if u don’t have jQuery in your server]

HTML Code:
[html]

[/html]
Just declare a class named “parent” in the li tag in which you have a submenu. Then its is done.

CSS Code:
[css]
div#menu ul li{
float:left;
}

div#menu ul li a{
display:block;
line-height:27px;
text-align:center;
color:#FFFFFF;
font-size:12px;
padding:0 13px;
border-right:1px solid #017302;
}

div#menu ul li a:hover, div#menu ul li a.active{
text-decoration:none;
}

.parent{
position:relative;
}

.parent ul{
position:absolute;
top:100%;
overflow:hidden;
left:0;
display:none;
background:#4CA82E;
}

You may also read:  How to setup a VPS (Ubuntu) for WordPress hosting – A to Z tutorial

div#menu ul li ul li a{
background:none;
width:auto !important;
white-space:nowrap;
text-align:left;
}

div#menu ul li ul li a:hover{
text-decoration:underline;
}

div#menu ul li ul li{
width:auto !important;
float:none;
}
[/css]

Now put the following code in your tag just below of the declaration of jQuery:
[html]

$(document).ready(function(){
$(“.parent”).hover(function(){
$(this).find(“ul”).show(“slow”);
}, function () {
$(this).find(“ul”).hide(“slow”);
});
});

[/html]
That’s it! Boom!! If you have this plugin just declare a class named “parent” in your

  • tag in which you have submenu.

    Thanks.

  • You may also like...

    Leave a Reply

    %d bloggers like this: