Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Dropdown Menu with CSS | jQuery Menu with Submenu Example

Feb 19, 2013
Introduction

Here I will explain how to create simple jQuery dropdown menu using CSS with example or  jQuery CSS Menu with Submenu example. jQuery dropdown menu is used to provide better navigation menu for users in website.

Description:
  
In previous articles I explained jQuery Menu with Bounce effect, CSS Tabbed Menu with rounded corners,
jQuery fancy switch on and off effects example, jQuery convert upper case to lower case and many articles relating to jQuery, asp.net. Now I will explain how to implement jQuery Dropdown menu or menu with submenu using jQuery

To implement dropdown menu we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Simple Dropdown Menu or Menu with Submenu</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.menu ul li').hover(
function () {
$('.sub_menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
}, function () {
$('.sub_menu', this).stop(true, true).slideUp();  /*slideUp the subitems on mouseout*/
});
});
</script>
<style type="text/css">
.menu{
width:600px;
font-family: verdana, Segoe UI;
background-color:#B34C00;
margin:0 auto;
height:38px;
border: 1px solid #B34C00;
border-radius: 4px; /*To make the corners rounded in IE*/
-moz-border-radius: 4px; /*this is for mozilla*/
-webkit-border-radius: 4px; /*chrome and other browsers*/
box-shadow: 0 1px 1px #dddddd inset;
-moz-box-shadow: 0 1px 1px #dddddd inset;
-webkit-box-shadow: 0 1px 1px #dddddd inset;
}
.menu ul{
padding:0px;
margin: 0px;
list-style: none;
}
.menu ul li{
display: inline-block;
float:left;
position: relative;
}
.menu ul li a{
color:#ffffff;
text-decoration: none;
display: block;
padding:10px 15px;
}
.menu ul li a:hover{
background-color: #666666;
}
.sub_menu{
position: absolute;
background-color: #666666;
width:200px;
top:38px;
left:0px;
display:none; /*hide the subitems div tag initially*/
border-bottom:4px solid #B34C00; /*just to add a little more good look*/
}
.sub_menu ul li{
width:200px;
}
.sub_menu ul li a{
color:#ffffff;
text-decoration: none;
display: block;
padding:10px 15px;
}
.sub_items ul li a:hover{
background-color: #777777;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<div class="sub_menu">
<ul>
<li><a href="#">The Company</a></li>
<li><a href="#">The Website</a></li>
<li><a href="#">The author</a></li>
</ul>
</div>
</li>
<li><a href="#">Tutorials</a>
<div class="sub_menu">
<ul>
<li><a href="#">Asp.net Tutorials</a></li>
<li><a href="#">Jquery Tutorials</a></li>
<li><a href="#">Sql Tutorials</a></li>
<li><a href="#">Other tutorials</a></li>
</ul>
</div>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
</body>
</html>
Live Demo

To check for live demo mouse hover on below menu 




If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

10 comments :

Anonymous said...
This comment has been removed by a blog administrator.
Mossad@1962 said...

hi........ added this menu in my html site but is is not working in IE
so what is the solution for that?

Suma said...

Hi suresh please help me

I have my Review page, in that 3 fields are there.

review title, Description, and Destination.

When I click submit button, if user is already loggedin, that review will insert in to sql database, otherwise login model popup window will open.

If he/she add credentials, it has to go that review page.

Please help me with jQuery modal popup window.
How to write condition in button code ?

I wrote this button_click:
Collapse | Copy Code
if(Request.QueryString["userid"] != null)
{
//insert code..
}
else
{

}

Irtekaz Ahmed Khan said...

can submenu to in submenu?

Anonymous said...

on tab (safari),after clicking on subitem, slid down is not working.

Unknown said...

Hi, I want add sub menu dynamically(using code behind), please help me...

AJAY WADEKAR said...

sir i want to remove first node i.e. root node in menu control (in asp menu control)... help
ajaywadekar13@gmail.com

ramandeep said...

thank u very much sir.nice blog..

Anonymous said...

For submenu hover..please correct this

.sub_items ul li a:hover{ with .sub_menu ul li a:hover{

Anonymous said...

please change sub_items with sub_menu ...unless it looks great

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.