a{ text-decoration: none; } #select_box{ position: relative; top: 10px; left: 0px; display: inline-block; width: 192px; } #select_box dl{ float: left; width: 192px; height: 32px; background: #FFFFFF; cursor: pointer; z-index: 100; } #select_box dl dt{ width: 172px; height: 32px; line-height: 34px; font-size: 1em; color: #fff; background:url(../img/select_bg.png) no-repeat center right; background-color:rgb(60,179,113); margin: 0; padding-left: 20px;} #select_box dl dd{ position: relative; left: -40px; width: 172px; height: 32px; line-height: 32px; font-size: .9em; color: #FFFFFF; background: #2A8F57; padding-left: 20px; z-index: 10; }
$(function(){ $("#types dd").hide(); $("#select_box").toggle(function(){ $("#types dd").stop(true,false).slideDown(200); },function(){ $("#types dd").stop(true,false).slideUp(200); }); $("#types dd").click(function(){ var type_val=$(this).html(); $("#types dt").html(type_val); $("#types dd").stop(true,false).slideUp(200); }); })
If it is used as a select component, you can add a form form and a hidden field (type="hidden" ), use jQuery to control writing values to the input, or to control form submission.
The above is the detailed content of Use Css+jQuery to create a drop-down menu. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
