JavaScript简单下拉菜单实例代码

本文实例讲述了Javascript简单下拉菜单实例代码。分享给大家供大家参考。具体如下：

这是一款Javascript实现的下拉菜单演示代码，带渐变效果的CSS+jQuery菜单，向下滑出型的菜单，最高支持两级，网上常见到的一种菜单风格，希望大家喜欢哦。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/

具体代码如下：

body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:0px}
.dropdown dt {width:80px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url()}
.dropdown dt:hover {background:url()}
.dropdown dd {position:absolute; overflow:hidden; width:100px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:100px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}


   
   
   


   

   
One
   

   

   
考高分网
   
Navigation Item 2
   
Navigation Item 3
   
Navigation Item 4
   
Navigation Item 5
 
 
 
 

 
Two
 

 

 
Navigation Item 1
 
Navigation Item 2
 
Navigation Item 3
 
默认主页
 
Navigation Item 5
 
 
 
 

 
Two
 

 

 
Navigation Item 1
 
Navigation Item 2
 
Navigation Item 3
 
Navigation Item 4
 
Navigation Item 5
 
 
 
 

 
Two
 

 

 
默认主页
 
Navigation Item 2
 
Navigation Item 3
 
Navigation Item 4
 
Navigation Item 5
 
 
 
 

 
Two
 

 

 
Navigation Item 1
 
默认主页
 
Navigation Item 3
 
Navigation Item 4
 
Navigation Item 5
 
 
 
 

 
Two
 

 

 
Navigation Item 1
 
Navigation Item 2
 
Navigation Item 3
 
Navigation Item 4
 
Navigation Item 5
 
 
 
 

 
Two
 

 

 
Navigat
 
Naviga
 
Navigati
 
Navigat
 
Navigatio
 
 
 
 
 

希望本文所述对大家的Javascript程序设计有所帮助。