console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单2</title>
<style>
* {margin: 0;padding: 0;line-height: 1;list-style: none;text-decoration: none;color: #333;}
.select{position: relative;border: 1px solid #ccc; display: inline-block; padding: 10px; cursor: pointer; width: 180px; box-sizing: border-box; border-radius: 5px;}
.select p{line-height: 20px; position: relative;}
.select p::before{content: "";display: inline-block;border: 6px solid ; border-color: #333 transparent transparent transparent; position: absolute; right: 0px; top: 50%; margin-top: -4px; transition: all ease-in-out .3s; transform-origin: 5px 3px;}
.select p::after{content: "";display: inline-block;border: 6px solid ; border-color: #fff transparent transparent transparent; position: absolute; right: 0px; top: 20%; transition: all ease-in-out .3s; transform-origin: 5px 3px;}
.select p.rotate::before,.select p.rotate::after{transform: rotateZ(-180deg);}
.select p.rotate::after{top: 40%;}
.select ul{position: absolute; left: 0px; top: 40px; padding: 5px 0px; width: 100%; border: 1px solid #ccc; border-radius: 5px; margin-top: 10px; display: none;}
.select ul li{ padding: 10px; margin: 5px 0px; transition: all ease-in-out .1s; cursor: pointer;}
.select ul li.active-option{background: #f5f7fa;}
</style>
</head>
<body>
<div class="select">
<p><span data-url="baidu.com">百度搜索</span></p>
<ul>
<li class="active-option"><span data-url="baidu.com">百度搜索</span></li>
<li><span data-url="google.com">谷歌搜索</span></li>
<li><span data-url="chaoxin.com">超星检索</span></li>
<li><span data-url="zhiwang.com">知网检索</span></li>
</ul>
</div>
<div class="select">
<p><span data-url="baidu.com">百度搜索</span></p>
<ul>
<li class="active-option"><span data-url="baidu.com">百度搜索</span></li>
<li><span data-url="google.com">谷歌搜索</span></li>
<li><span data-url="chaoxin.com">超星检索</span></li>
<li><span data-url="zhiwang.com">知网检索</span></li>
</ul>
</div>
<div class="select">
<p><span data-url="baidu.com">百度搜索</span></p>
<ul>
<li class="active-option"><span data-url="baidu.com">百度搜索</span></li>
<li><span data-url="google.com">谷歌搜索</span></li>
<li><span data-url="chaoxin.com">超星检索</span></li>
<li><span data-url="zhiwang.com">知网检索</span></li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$('.select').click(function(){
$(this).find('ul').slideToggle(300,'swing');
$(this).find('p').toggleClass('rotate');
})
$('.select ul').on('mouseover','li',function(event){
if(event.target !== this) return;
$(this).addClass('active-option').siblings().removeClass('active-option');
})
$('.select ul').on('click','li',function(event){
var _this = $(this);
if(event.target !== this) _this = $(event.target).parents('li');
var targetParent = $(this).parents('.select')
var val = _this.html();
targetParent.find('p').html(val);
})
})
</script>
</body>
</html>