一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

js实现下拉框效果(select)

时间:2017-08-01 编辑:简简单单 来源:一聚教程网

效果图:

代码如下:

 

 代码如下复制代码

  

  

  

    *{padding: 0;margin:0;}

    ul,li{list-style: none}

    .left{float: left;}

    .right{float: right;}

    .select_contain{font-size: 14px;color: #333;line-height: 38px;margin: 30px 0;}

    .select_item{margin-right: 50px;position: relative;}

    .select_tit{margin-right: 20px;}

    .select_result{width:  100px;line-height: 38px;border:1px solid #ccc;text-align:  center;border-radius: 4px;text-indent: -8px;cursor:pointer;}

    .select_result .triangle{border:5px solid transparent;border-top:5px solid #666;position: absolute;top: 16px; right:8px;}

    .select_item   ul{display:none;position:absolute;top:100%;right:0;width:100px;background:  #f3f3f3;border:1px solid #ccc;border-radius:0 0 4px 4px;  border-top-color:#f3f3f3;margin-top:-4px;}

    .select_item ul li{text-align: center;cursor: pointer;}

    .select_item ul li:hover{background: #f4a100; color: #fff;}

  

  

  

  

      

        选择节目:

        

          

            选择节目

            

          

          

                

    • 节目1

                

    • 节目2

                

    • 节目3

              

            

          

          

            选择嘉宾:

            

              

                选择嘉宾

                

              

              

                  

      • 嘉宾1

                  

      • 嘉宾2

                  

      • 嘉宾3

                

              

            

         

       

      热门栏目