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 Hover Dropdown Menu with CSS Example | Show jQuery Dropdown Menu on Hover with CSS

Apr 1, 2013
Introduction:

Here I will explain how to show jQuery dropdown menu on hover with CSS example or show/hide dropdown menu on hover/mouseout using jQuery.

Description:
  
In previous articles I explained jQuery dropdown menu with CSS, jQuery Bounce Menu Example, jQuery floating navigation menu on scrolling and many articles relating to
JavaScript, jQuery, asp.net. Now I will explain how to show/hide dropdown menu on hover/mouseout using jQuery.

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery hover dropdown menu with css example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$(".menu").hover(
function() { $(".sub").slideToggle(400); },
function() { $(".sub").hide(); }
);
});
</script>
<style type="text/css">

a{
text-decoration: none;
}
.menu{
font-family: Arial;
color: #515151;
width: 200px;
position: relative;
height: 40px;
text-align:left;
width: 202px;
margin: 0 auto;
}
.menu li a{
color: #515151;
display: block;
padding: 6px 15px;
cursor: pointer;
font-size: 14px;
}
.menu li a:hover{
background: #f44141;
color: #fff;
}
.sub{
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
padding: 40px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
}
a.hover-link{
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
padding: 10px 0 1px 10px;
height: 28px;
cursor:pointer;
border-radius: 5px 5px 0 0;
font-weight: bold;
border: 1px solid #ddd;
}
.sub-options{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}
</style>
</head>
<body>
<div class='menu'>
<a class='hover-link'>Hover on Menu</a>
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Live Demo

For Live Demo 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

11 comments :

Anonymous said...

wo tnks bro

Unknown said...

Hi how are you

Unknown said...

How are you badri

Anonymous said...

very nice Article

Bhavin Rana said...

can you tell me how can i animate uppar side ? thanks

Mossad@1962 said...

Not showing menu when postback occurs

sravan said...

Can We load it in dynamic

Anonymous said...

ewq

Unknown said...

How to add scroll in this example ?

Rakesh Balhara said...

It's worked for me. Thanks for wonderful Example :)

rafyong said...

very nice. can u show me how to make the menu dynamically by get the menu list from db?

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.