JavaScript下拉菜单功能实例代码

本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：

 
 
   
     
     
     
      body, 
      ul, 
      li { 
 margin: 0; 
 padding: 0; 
 font-size: 13px; 
      } 
      ul, 
      li { 
 list-style: none; 
      } 
      #divselect { 
 width: 186px; 
 margin: 80px auto; 
 position: relative; 
 z-index: 10000; 
      } 
      #divselect cite { 
 width: 150px; 
 height: 24px; 
 line-height: 24px; 
 display: block; 
 color: #807a62; 
 cursor: pointer; 
 font-style: normal; 
 padding-left: 4px; 
 padding-right: 30px; 
 border: 1px solid #333333; 
  
      } 
      cite:before { 
 content: ''; 
 position: absolute; 
 right: 7px; 
 bottom: 7px; 
 width: 0; 
 height: 0; 
 border-width: 4px; 
 border-style: solid; 
 border-color: #888 transparent transparent transparent; 
 transition: all 0.2s; 
 -webkit-transition: all 0.2s; 
 -moz-transition: all 0.2s; 
 -o-transition: all 0.2s; 
 -ms-transition: all 0.2s; 
 transform-origin: 50% 25%; 
 -ms-transform-origin: 50% 25%; 
 -moz-transform-origin: 50% 25%; 
 -webkit-transform-origin: 50% 25%; 
 -o-transform-origin: 50% 25%; 
      } 
      .extended cite:before { 
 transform: rotate(180deg); 
 -webkit-transform: rotate(180deg); 
 -moz-transform: rotate(180deg); 
 -o-transform: rotate(180deg); 
 -ms-transform: rotate(180deg); 
      } 
      #divselect ul { 
 width: 184px; 
 border: 1px solid #333333; 
 background-color: #ffffff; 
 position: absolute; 
 z-index: 20000; 
 margin-top: -1px; 
 display: none; 
      } 
      #divselect ul li { 
 height: 24px; 
 line-height: 24px; 
      } 
      #divselect ul li a { 
 display: block; 
 height: 24px; 
 color: #333333; 
 text-decoration: none; 
 padding-left: 10px; 
 padding-right: 10px; 
      } 
      .animated { 
 animation-fill-mode: both; 
 -webkit-animation-fill-mode: both; 
 -moz-animation-fill-mode: both; 
 -o-animation-fill-mode: both; 
 -ms-animation-fill-mode: both; 
      } 
      .speed_fast { 
 animation-duration: .3s; 
  
      } 
      .anim_extendDown { 
 animation-name: extendDown; 
 -webkit-animation-name: extendDown; 
 -moz-animation-name: extendDown; 
 -o-animation-name: extendDown; 
 -ms-animation-name: extendDown; 
      } 
      @keyframes extendDown { 
 0% { 
   border-bottom-color: transparent; 
   height: 0; 
 } 
 100% { 
   border-bottom-color: #333; 
   height: 120px; 
 } 
      } 
      @-webkit-keyframes extendDown { 
 0% { 
   border-bottom-color: transparent; 
   height: 0; 
 } 
 100% { 
   border-bottom-color: #333; 
   height: 120px; 
 } 
      } 
      @-moz-keyframes extendDown { 
 0% { 
   border-bottom-color: transparent; 
   height: 0; 
 } 
 100% { 
   border-bottom-color: #333; 
   height: 120px; 
 } 
      } 
      @-o-keyframes extendDown { 
 0% { 
   border-bottom-color: transparent; 
   height: 0; 
 } 
 100% { 
   border-bottom-color: #333; 
   height: 120px; 
 } 
      } 
      @-ms-keyframes extendDown { 
 0% { 
   border-bottom-color: transparent; 
   height: 0; 
 } 
 100% { 
   border-bottom-color: #333; 
   height: 120px; 
 } 
      } 
     
   
   
     
      请选择分类 
      
 
 
 
   ASP开发 
 
 
 
 
   .NET开发 
 
 
 
 
   PHP开发 
 
 
 
 
   Javascript开发 
 
 
 
 
   Java特效 
 
 
      
 
     
     
   
 

1、要阻止事件冒泡

2、键盘事件，用index索引

3、通过设置类名或清空类名的方式给元素增加动画和恢复原有样式

以上所述是小编给大家介绍的Javascript下拉菜单功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！