您的位置: 首页 >日志>前端技术>详细内容

前端技术

Jquery+css制作的下拉菜单

来源:本站原创 发布时间:2016-03-31 18:26:14 浏览次数: 【字体:

由于各浏览器自带的下拉菜单各不相同,根据效果图,为了满足各浏览器兼容并还原效果图,自己就用jquery+css制作了一个下拉菜单,效果如下!

 

css代码如下:

/* 底部-友情链接 */
#divselect{width: 248px; padding: 10px 11px 9px 12px; float: right; position: relative; z-index: 1; background-color: #dbd5c7;}
#divselect h3{height: 28px; line-height: 28px; padding-left:10px; text-align: left; font-size: 14px; color: #777;  background: url(images/divselectBg.png) right top no-repeat; cursor: pointer;}
#divselect ul{ position: absolute; z-index: 1; left: 12px; bottom: 37px; width:246px; overflow: hidden; background-color: #fff; border: 1px solid #ddd; border-bottom: 0;}
#divselect ul li{ height: 28px; line-height: 28px; overflow: hidden;}
#divselect ul li.noData{padding: 0 10px; color: #ddd;}
#divselect ul li a{display: block; padding: 0 10px; margin: 0; color: #333;}
#divselect ul li a:hover{background-color: #f0f0f0; text-decoration: none;}

 

HTML代码如下:

   

友情链接

   
           
  • 教育微博
  •        
  • 爱百科
  •        
  • 扬大附中教育集团
  •        
  • 国家教育部
  •        
  • 江苏省教育厅
  •        
  • 扬州教育
  •        
  • 江苏省教育考试院
  •        
  • 江苏省教育国际交流中心
  •        
  • 扬州中学教育集团树人学校
  •        
  • 南师附中
  •        
  • 扬州中学
  •        
  • 扬州大学附属中学
  •    
     
     
    JS代码如下:
     
    完工~
    ×

    用户登录