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..
ReplyDeletewow its awesome thnxx for code
ReplyDeleteNice Script. Thanks for the code.
ReplyDeleteverry nice but i hove small code and not complex:
ReplyDelete$(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.
ReplyDeleteVery nice scripts. Thanks for Sharing.
ReplyDeleteNice script, would be good if you could do a Mega Drop Down Menu ?
ReplyDeleteAlso could your replace ".click" with ".toggle" as an alternative ?
Regards
Thanks for sharing
ReplyDeletenice script keep up your goodwork
ReplyDeleteThanks, impressive script and inspiring piece of code.
ReplyDeleteas usual, you always post a very useful stuff! I will use this css trick for sure! thanks a lot, man! :)
ReplyDeletegood script and good style.
ReplyDeleteWould it be possible to do a hover version?
ReplyDelete$(".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
ReplyDeleteThanks again for the code.
ReplyDeleteExcellent!
very usefull
ReplyDelete:D nice
ReplyDeleteas always nice tuts
ReplyDeletedo you know .toggle() ?
ReplyDeletecode less do more...
thks
nice work
ReplyDeletegreat one..can you annimate that? is it possible?
ReplyDeleteexcellent
ReplyDeleteCool...
ReplyDeleteGood job
ReplyDeleteNice Script again...
ReplyDeleteI will learn like account login / logout script homework, thanks you is work script a best great
ReplyDeleteNice drop down menu. Thanks for this post.
ReplyDeletegood one........
ReplyDeleteNice one, I always follow this blog.. :D
ReplyDeleteawesome
ReplyDeleteNice script
ReplyDeletenice script works perfectly
ReplyDeleteAwesome man
ReplyDeletegood one
ReplyDeleteYou have really nice blog....nice script
ReplyDeleteNice!!!
ReplyDeletenice.. thanx !
ReplyDeletewow..nice tutorial...
ReplyDeletevery nice
ReplyDeletenice
ReplyDeletegood thanks
ReplyDeleteVery basic... I expect something better from you!
ReplyDeletemenu beautyful,code good,thanks
ReplyDeletepretty simple code! Simple but works!
ReplyDeleteyou can use a input checkbox + css w/ pseudo class + one js event binding to achieve the same effect
very goods, thank so much
ReplyDeletecool!!!
ReplyDeletethanks bro..
ReplyDeletelooks like twitter menu
ReplyDeletenice brother... u done excellent job...
ReplyDeleteGood 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.
ReplyDeleteGreate style of coding...
ReplyDeletevery good
ReplyDeletewow its awesome thnx for the code
ReplyDeleteDesign of menu is awesome. great work
ReplyDeleteLooks great
ReplyDeleteNice script :-)
ReplyDeleteGreat Script. Will be using in the future
ReplyDeleteVery nice script
ReplyDeleteI don't know the reason why you have a long javascript code as this:
ReplyDelete$(".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
ReplyDeleteits rally awesome
ReplyDeleteExcellent design :)
ReplyDeleteVery good script, congratulations, always creates great posts.
ReplyDeleteCool, I like it
ReplyDeleteReally cool, thank you.
ReplyDeleteReally Very Useful Script for Web Developers.
ReplyDeletecan any one try to explain to me how and what slideTggle() does.... i am new in PHP n javascript
ReplyDeleteGreat work ...The drop shadow and rounded corners are not working in IE9. Can Fix it? Thanks
ReplyDeleteHow can we implement it with more than 1 dropdown submenu ?
ReplyDeleteYes, I want to have multiple dropdowns. How do I achieve that without both of them opening?
ReplyDeletegood work
ReplyDeleteGreat tutorial.Thanks for sharing.
ReplyDeleteNice! good work...
ReplyDeletesuper
ReplyDeletegood..
ReplyDeleteThanks for example
ReplyDeletegood post.. nice to work out..
ReplyDeleteThis 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?
ReplyDeleteThanks
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.
ReplyDeleteThisUsrRes
ReplyDeletenice code tanks for sharing
ReplyDeletethanks for trik
ReplyDeletehow i can make it in multiple div ?
ReplyDeleteI get a code error in the JS file on line 22.
ReplyDeleteIt works only in demo. If you put in on a real website, the sub menu appears in the left top corner.
ReplyDeleteNice code. But I found a little problem with it. When you have a db record, for example like :
ReplyDeleteThis 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:)
ReplyDeleteGreat work man thanks!
ReplyDeleteNice work dude...thanks alot
ReplyDeletethank for your triks
ReplyDeleteyour script doesnot select value of dropdown by press from keyboard. BIGGEST bug in every jquery dropdown. Well a nice product.
ReplyDeleteDo you fix it????
thank you for sharing about jquery with me.
ReplyDeletethank you:))
ReplyDeleteVery nice...........
ReplyDeletevery nice..................
ReplyDeleteThanks
Very good code :P Thank you.
ReplyDeletegood work
ReplyDeleteHi 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!
ReplyDeletethis is a good example. Perhaps one of the better (if not best) example i've come across on the internet. Thanks, much appreciated.
ReplyDeleteThat was WOWSOME! It was really what I was searching. Keep it Up! & continue to write such awesome posts!
ReplyDeleteThx man. that a great script for beginners. very helpful!!!
ReplyDeleteperfect.
ReplyDeletethank you
Greatx
ReplyDeleteVery good code
ReplyDeletethank you
hey buddy thanks.is it possible add a sub menu?
ReplyDeleteAwesome Thanks !
ReplyDeleteThank 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!
ReplyDeleteI was looking for crucial information on this subject.Thanks for taking the time to discuss this
ReplyDeleteID's should never begin with a number... bad HTML
ReplyDeleteHi there Srinivas. Im so grateful for you posting this but I need a littel help.. I have emailed you. Would you mind taking a look for me? much appreciate. amyjo
ReplyDeletehello my dear friend, i found an error in your code, it's not really a problem, but in my situation it is, look. and the follow code check the ";"
ReplyDelete< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
">< /script>;
if you can see the ";" was my problem cause show it in my navegator, but thanks , haha i dont speak english sr
nice
ReplyDeletehow to make it work like dropdown, ie, when user presses a key, that option should get seleced
ReplyDeleteVery helpful
ReplyDeleteGreat concise, easy to understand demo for newbies to Jquery. Thanks for posting. I may even start to like javascript..
ReplyDeleteNice work, It saved my day
ReplyDeleteThank for the code.
ReplyDeleteGreat! Thank you
ReplyDeleteI love you.
ReplyDeleteNice information Thanks for sharing your thoughts, I have searched for this type of menu but not getting properly from others.
ReplyDeleteI love this
ReplyDeletetrims for your triks .....
ReplyDeletecan you teach whether how to make it dynamic using php-mysql ? with submenus upto 3 levels ot more?
ReplyDeletegood tutorial...nice work man..keep it up..
ReplyDeleteif u use toggle then it make more easy...friend
i'll use this in my code.... thank you..
ReplyDeleteYour Post is too good, but this code is not working in my website, what could be problem in my code?
ReplyDeletethank you very much. nice tutorial
ReplyDeleteThanks for the code
ReplyDeletethanks a lot..........
ReplyDeletetesting
ReplyDeleteThank you!
ReplyDeleteThank you, nice tutorial.
ReplyDeletethanks for help.
ReplyDeletegreat script.
cool
ReplyDeleteVery nice
ReplyDeleteThanks for sharing!!!
Thanks for sharing i was looking for it.....
ReplyDeletecan u make it scrolling with multi dropdowns?
ReplyDeleteHi I have a doubt,I am dynamically generating hyperlink in jquery on button click,Values to displayed as submenu to button.how can in do?
ReplyDeletenice script
ReplyDeleteis this script can also doing a multilevel submenu?
Thank you very much for this amazing thing
ReplyDelete