aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 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

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.

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, 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="">
<title>jQuery hover dropdown menu with css example</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function() {
function() { $(".sub").slideToggle(400); },
function() { $(".sub").hide(); }
<style type="text/css">

text-decoration: none;
font-family: Arial;
color: #515151;
width: 200px;
position: relative;
height: 40px;
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;
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;
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
padding: 10px 0 1px 10px;
height: 28px;
border-radius: 5px 5px 0 0;
font-weight: bold;
border: 1px solid #ddd;
font-size: 11px;
<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>
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,, 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

Other Related Posts

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