This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects.
Download Script 
Live DemoHTML Code
Simple HTML code
<div class="dropdown">
<a class="account" >My Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li ><a href="#settings">Settings</a></li>
<li ><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div>
<a class="account" >My Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li ><a href="#settings">Settings</a></li>
<li ><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div>
JavaScript
Contains javascipt code. $(".account").click(function(){}- account is the class name of the My Account anchor tag. Using $(this).attr('id') calling id value of the anchor tag and based on condition showing .submenu div box and the same time $(this).attr('id', '1') adding id value too.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
"></script>;
<script type="text/javascript" >
$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});
//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});
//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
Document click on document $(document).mouseup(function() hiding the .submenu"></script>;
<script type="text/javascript" >
$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});
//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});
//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
CSS Code
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
excellent script..
wow its awesome thnxx for code
nice
Nice Script. Thanks for the code.
verry nice but i hove small code and not complex:
$(document).ready(function()
{
$(".account").click(function()
{
$('.submenu').toggle();
});
//Mouseup textarea false
$(".submenu").mouseup(function()
{
return false
});
$(".account").mouseup(function()
{
return false
});
//Textarea without editing.
$(document).mouseup(function()
{
$(".submenu").hide();
});
});
Very good script, congratulations, always creates great posts.
Very nice scripts. Thanks for Sharing.
Nice script, would be good if you could do a Mega Drop Down Menu ?
Also could your replace ".click" with ".toggle" as an alternative ?
Regards
Thanks for sharing
nice script keep up your goodwork
Thanks, impressive script and inspiring piece of code.
as usual, you always post a very useful stuff! I will use this css trick for sure! thanks a lot, man! :)
good script and good style.
cool
Would it be possible to do a hover version?
$(".account").hover(function()
Doesnt allow you to get to the menu, it dissapears before the mouse can get to it.
not coming properly in IE 7,8,9
Thanks again for the code.
Excellent!
very usefull
:D nice
as always nice tuts
do you know .toggle() ?
code less do more...
thks
nice work
great one..can you annimate that? is it possible?
excellent
Cool...
Good job
Nice Script again...
I will learn like account login / logout script homework, thanks you is work script a best great
Nice drop down menu. Thanks for this post.
good one........
Nice one, I always follow this blog.. :D
awesome
Nice script
nice script works perfectly
Awesome man
good one
You have really nice blog....nice script
Nice!!!
nice
nice.. thanx !
wow..nice tutorial...
very nice
nice
good thanks
Very basic... I expect something better from you!
menu beautyful,code good,thanks
pretty simple code! Simple but works!
you can use a input checkbox + css w/ pseudo class + one js event binding to achieve the same effect
very goods, thank so much
cool!!!
thanks bro..
looks like twitter menu
nice brother... u done excellent job...
Good example... however if the My Account text had a background color by default, it would be nice, rather than the background appearing when we click on it.
Greate style of coding...
very good
wow its awesome thnx for the code
Design of menu is awesome. great work
Looks great
Nice script :-)
Great Script. Will be using in the future
Very nice script
I don't know the reason why you have a long javascript code as this:
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});
//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});
//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
where you could achieve a more beautiful thing by using this code
$(".dropdown").hover(function(){
$(".submenu").slideToggle(400);
});
nice script - but how to get the border-radius work with internet-Exlorer
its rally awesome
Excellent design :)
Very good script, congratulations, always creates great posts.
Cool, I like it
Really cool, thank you.
Really Very Useful Script for Web Developers.
can any one try to explain to me how and what slideTggle() does.... i am new in PHP n javascript
Great work ...The drop shadow and rounded corners are not working in IE9. Can Fix it? Thanks
How can we implement it with more than 1 dropdown submenu ?
Yes, I want to have multiple dropdowns. How do I achieve that without both of them opening?
good work
Great tutorial.Thanks for sharing.
Nice! good work...
super
good..
Thanks for example
good post.. nice to work out..
This looks amazing! How do you implement more than one drop down menu? I am new to web design and struggling with finding a solution. Any suggestions?
Thanks
Alexandra
I was looking for crucial information on this subject.Thanks for taking the time to discuss this,They have been a big help for us.Thanks a lot.
ThisUsrRes
nice code tanks for sharing
thanks for trik
how i can make it in multiple div ?
I get a code error in the JS file on line 22.
It works only in demo. If you put in on a real website, the sub menu appears in the left top corner.
Nice code. But I found a little problem with it. When you have a db record, for example like :
This is a "test" field!
When you click to edit, the text in quotes disappears. Iw it at the beginning, the whole filed is gone.
I tried many ways to fix this, but with no success.
Where exactly I have to escape the characters like theese?
thank you:)
Great work man thanks!
Nice work dude...thanks alot
thank for your triks
your script doesnot select value of dropdown by press from keyboard. BIGGEST bug in every jquery dropdown. Well a nice product.
Do you fix it????
thank you for sharing about jquery with me.
thank you:))
Very nice...........
very nice..................
Thanks
Very good code :P Thank you.
good work
Hi all, please understand the code this nice man has given and try to make it better. Copy-Paste will help you just once. Learn and you will be the best!
this is a good example. Perhaps one of the better (if not best) example i've come across on the internet. Thanks, much appreciated.
That was WOWSOME! It was really what I was searching. Keep it Up! & continue to write such awesome posts!
Thx man. that a great script for beginners. very helpful!!!
perfect.
thank you
Greatx
Very good code
thank you
hey buddy thanks.is it possible add a sub menu?
Awesome Thanks !
Thank u...excellent work!!! Can u help me for a box comment in my PhoheGap windows 7 phone which I can use Jquery prepend...without fetching from the DB.....Thank u once again!
I was looking for crucial information on this subject.Thanks for taking the time to discuss this