效果图：

代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 '/title/title style type=' text/CSS ' * { padd : 0；margin:0} ul，li{list-style: none} .左{左侧浮动： }。右{右侧浮动： }。select _ contain { font-size : 14px；颜色： # 333线高： 38px边距： 30px 0；} .select _ item { margin-right : 50px；相对位置：} .select _ tit { margin-right : 20px；} .select _ result { width: 100px线高： 38pxborder:1px固体# ccc文本对齐：中心；边界半径： 4px文本缩进：-8px；光标：指针指针；} .选择_结果。三角形{border:5px实心透明；边框-top:5px实心# 666;绝对位置：top: 16pxright:8px}。select _ item ul { display : none位置：绝对；前：100%；右：0宽度宽度：100像素背景： # f3f 3；border:1px固体# cccborder-radius :0 0 4px 4px；边框-顶部-颜色： # F3 F3边距-top :-4px；} .选择项目ul Li { text-align :居中；光标：指针；} .select _ item ul Li :悬停{背景： # F4 a 100；color: # fff}/style脚本src=' http :http://cdn。bootscs。com/jquery/3。2 .1/jquery。js '/script脚本函数select(){ $(document).单击(函数(){ $(').选择模块向上滑动()；}) var模块=$('。select _ result’)；模块。click(function(e){ e . stopperpagation()；var ul=$(这个)。next()；ul.stop().slide Toggle()；ul.children().click(function(e){ e . stopperpagation()；$(这个)。父项()。prev().儿童(' span ').文本($(这个).text())；ul.stop().向上滑动()；})})} $(function(){ select()；})/脚本/头体div class=' select _ contain ' div class=' select _ item clear fix left ' div class=' select _ tit left '选择节目：/div class=' select _ module _ con left ' div class=' select _ result ' span选择节目/span div class='三角形/div/ul Li分区节目1/李莉节目2/李莉节目3/Li/ul/div/div class=' select _ item clear fix left ' div class=' select _ tit left '选择嘉宾：/div class=' select _ module _ con left ' div class=' select _ result ' span选择嘉宾/span div class='三角形/div/ul Li分区嘉宾1/李莉嘉宾2/李莉嘉宾3/Li/ul/div/div/body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！