Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Dropdown Menu With JQuery</title>
<style type="text/css">
​
/* CSS For Dropdown Menu Start */
ul
{
  list-style:none;
  padding:0px;
  margin:0px
}
​
ul li
{
  display:inline;
  float:left;
}
​
ul li a
{
  color:#ffffff;
  background:#0099CC;
  margin-right:5px;
  font-weight:bold;
  font-size:12px;
  font-family:verdana;
  text-decoration:none;
  display:block;
  width:100px;
  height:25px;
  line-height:25px;
  text-align:center;
  padding:2px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #0099CC;
}
​
ul li a:hover
{
  color:#cccccc;
  background:#000000;
  font-weight:bold;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  padding:2px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #000000;
}
​
ul li.sublinks a
{
  color:#000000;
  background:#f6f6f6;
  border-bottom:1px solid #cccccc;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  padding:2px;
  margin-top:4px;
}
​
ul li.sublinks a:hover
{
  color:#000000;
  background:#FFEFC6;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  padding:2px;
}
​
ul li.sublinks
{
  position:absolute;
  display:none;
}
​
​
/* CSS For Dropdown Menu End */
​
​
​
#container
{
  margin:0px auto;
  width:570px;
}
​
.clear
{
  clear:both;
}
​
.left
{
  float:left;
}
​
.right
{
  float:right;
}
</style>
</head>
​
<body>
​
  <div id="container">
  
  <!-- First Menu Start -->
  <ul>
    <li><a href="#" class="dropdown"> </a></li>
    
   
    
  </ul>
  <!-- First Menu End -->
​
  <!-- Second Menu Start -->
  <ul>
    <li><a href="#" class="dropdown">Menu Two</a></li>
    
    <li class="sublinks">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
    </li>
    
  </ul>
  <!-- Second Menu End -->
​
  <!-- Third Menu Start -->
  <ul>
    <li><a href="#" class="dropdown">Menu Three</a></li>
    
    <li class="sublinks">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
    </li>
    
  </ul>
  <!-- Third Menu End -->
​
  <!-- Fourth Menu Start -->
  <ul>
    <li><a href="#" class="dropdown">Menu Four</a></li>
    
    <li class="sublinks">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
    </li>
    
  </ul>
  <!-- Fourth Menu End -->
​
  <!-- Fifth Menu Start -->
  <ul>
    <li><a href="#" class="dropdown">Menu Five</a></li>
    
    <li class="sublinks">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
    </li>
    
  </ul>
  <!-- Fifth Menu End -->
  
  
  
  </div>
​
  
    <br /><br /><br /><br />
  <br /><br /><br /><br />
  <br /><br /><br /><br />
  <br /><br /><br /><br />
  
    <br /><br />
    <!--<hr width="750" />-->
    <p align="center">
      Back to <a href="http://sarfraznawaz.wordpress.com/" style="color:#FF0066; font-weight:bold; text-decoration:none;">Sarfraz Ahmed's Blog</a>
​
​
</body>
</html>
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers