jQuery实现非常实用漂亮的select下拉菜单选择效果

本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：

先来看如下运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/

具体代码如下：

body{font-size:12px;}
.select{width:150px;height:24px;line-height:24px;position:relative;text-align:center;cursor:pointer;background:url(images/selectbg.jpg) right 0px no-repeat;color:#fff;}
.option{line-height:24px;width:150px;position:absolute;top:24px;left:0px;display:none;background:#820014;}
ul{list-style:none;margin:0;padding:0;}
ul li{height:24px;background:#666px;text-align:center;}





预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

您的选择是：
请选择分类
 
  

   
推荐课程
   
资讯中心
   
辅导专区
   
公职考试
   
司法考试
   
报关、报检员
   
高考辅导
   
招生简章
   
招生信息
   
学员专区
   
公计培训
   
名师团队
   
辅导教材
  
 

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