PHP Script
Java Script
Jquery Script
AJAX Script
JSP Script
Perl Script
Shell Script
ASP Script
Licensed Scripts
Licensed Scripts
Premium Icons
HTML Tutorials
CSS Tutorials
Photoshop Tutorials
Flash Tutorials
JavaScript Tutorials
Jquery Tutorials
JSP Topics
Php Tutorials
MYSQL Tutorials
Regular Expression
Perl Tutorial
Domain & Dns
Unix Commands
C++
Vista Services
Linux Services
Web Building
Seo Tutorial
Powerpoint
VB.Net Tutorial
Rss Feed
Clipart Pictures
Signs
Country Maps
Country Emblems
Background Images
Menu buttons
Logos
Menu Builder
Button Creator
Link Analyzer
DNS Lookup
Website Popularity
Color Chooser
Apache Ver Lookup
Page Rank Checker
Case Converter
Form Generator
Statistics
Epoch-GMT Converter
Hours Calculator
Htpasswd Generator
Favicon Generator
Backlink Checker
Image Crop Tool
Chart and Graph Tools
Multiple Drop Down Menu
Email Verification Tool
If Modified Since
Language Subtags
Dynamic Menu Builder
Forums
Outsource Servers
Internet Stats
Online Calculator
Hosting Companies
Home
Scripts
Tutorials
Images
Tools
Purchase
Snippets
Web Site Tools
Button Creator
Drop Down Menu
Web Color Chooser
Epoch-GMT Converter
Apache Version Lookup
Backlink Checker
IP/DNS Tools
Link Checker
Link Popularity
Form Generator
Case Converter
Page Rank Tool
Statistics Tool
Hours Calculator
Htpasswd Generator
Favicon Generator
Image Crop Tool
Chart and Graph Tools
Multiple Drop Down Menu
Language Subtags Lookup
Email Verification Tool
Code for Drop Down Menu
Your drop down menu looks like,
Copy The Code :
<style type="text/css">
.tab{
font-family: arial, verdana, san-serif;
font-size: 14px;
}
.asd
{
text-decoration: none;
font-family: arial, verdana, san-serif;
font-size: 13px;
color:#4234ff;
}
/*****remove the list style****/
#nav {
margin:0;
padding:0;
list-style:none;
}
/*****LI display inline *****/
#nav li {
float:left;
display:block;
width:100px;
background:#cccccc;
position:relative;
z-index:500;
margin:0 1px;
}
/*****parent menu*****/
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color:#ffffff;
text-align:center;
color:#ffeecc;
}
#nav li a:hover
{
color:#470020;
}
/* style for default selected value */ #nav a.selected {
color:#4234ff;
}
/* submenu */ #nav ul
{
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li
{
width:100px;
float:left;
border-top:1px solid #fff;
}
/* display block will make the link fill the whole area of LI */ #nav ul a
{
display:block;
height:15px;
padding: 8px 5px;
color:#ff7777
}
#nav ul a:hover
{
text-decoration:underline;
padding-left:15px;
}
</style>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(350);
},
function () {
//hide its submenu
$('ul', this).slideUp(350);
}
);
});
</script>
<input type=hidden name=arav value=""><ul id='nav'>
</li>
</ul>
Download Jquery file
Usage
1) Just copy and paste this drop down menu code where you want to use.
2)
Click Here
to download the jquery file.
3) Set up the correct path for your jquery file, using the following code.
<script type="text/javascript" src="jquery.js">
4) Now enjoy your own drop down menu.
A Note
Hope you enjoy our free webmaster tools which helps you to develop, manage a Website or Web pages effectively.
Other Links
Privacy Policy |
Terms and Conditions |
License |
Sitemap |
Contact Us
All Rights reserved © hscripts.com