Ads 468x60px


Featured Posts

Thursday, 17 April 2014

Simple Drop Down Menu with Jquery and CSS

Simple Drop Down Menu with Jquery and CSSu
Categories :- Drop down menu using jquery,JQuery Dropdown  Menu,JQuery Restrict to Allow Only Numbers in Textbox in,JQuery Menu In aspdot

Introduction :- This post is very basic level jquery and css implementation.Here i want to explain how to show JQuery dropdown menu on hover with css example.Here show/hide menu on hover/mouseout using JQuery.

Description :- In my previous article i have explained how to show  drop-down  menu using JQuery. Now i am explained how to design simple drop down menu with CSS,HTML and Jquery.

 Step 1 :- Create a new website.
Step 2 :-  Write Click on Project explorer and add new item in your project and give a name to the web page.
Step 3 :-   Write a code as shown below in .aspx page

<html xmlns="">
<head runat="server">

<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;
<form id="form1" runat="server">
<div class='menu'>
<a class='hover-link'>Hover on Menu</a>
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'>Java</a></li>
<li><a href='#'>PHP</a></li>
<li><a href='#'>My-Sql</a></li>
<li><a href='#'>C</a></li>
<li><a href='#'>C++</a></li>


Output as shown below

Download sample code attached



New Updates

Related Posts Plugin for WordPress, Blogger... View My Stats

Related Result