下拉列表的实现

css部分

            *{
				margin: 0;
				padding: 0;
			}
	    	#u{
				width: 900px;
				height: 50px;
				background-color: aqua;
				list-style-type: none;
			}
			#u>li{
				width: 100px;
				height: 50px;
				float: left;				
			}
			#u>li>span{
				width: 100px;
				height: 50px;
				line-height: 50px;
				float: left;
				text-align: center;
			}
			#u1{
				list-style-type: none;				
				float: left;
				display: none;
			}
			#u1>li{
				width: 100px;
				height: 50px;
				background-color: aquamarine;
				line-height: 50px;
				text-align: center;
				background-color: cornsilk;
			}

body部分

       //使用无序列表
        <ul id="u">
	   	<li>
			<span>学院首页</span>			
			</li>
	   	<li>
			<span>学院概况</span>
			<ul id="u1">
				<li>学校简介</li>
				<li>十四五规划</li>
				<li>学院章程</li>
				<li>现任领导</li>
			</ul>
			</li>
	   	<li>
			<span>机构设置</span>
			<ul id="u1">
				<li>党政机构</li>
				<li>教学机构</li>
				<li>教辅机构</li>
			</ul>
			</li>
	   	<li>
			<span>党建工作</span>			
			</li>
	   	<li>
			<span>招生就业</span>
			<ul id="u1">
				<li>招生信息</li>
				<li>就业信息</li>
			</ul>
			</li>
	   	<li>
			<span>教育教学</span>			
			</li>
	   	<li>
			<span>校园文化</span>
			<ul id="u1">
				<li>团学活动</li>
				<li>创新创业</li>
				<li>宣传片</li>
				<li>校园风光</li>
				<li>线上校史馆</li>
			</ul>
			</li>
	   	<li>
			<span>信息公开</span>			
			</li>
	   	<li>
			<span>领导信箱</span>			
			</li>
	   </ul>

js部分

        $('#u>li').mouseenter(function(){
			// $('#u1').stop().slideDown(2000)
			$(this).children('ul').stop().slideDown(500)
		})
		$('#u>li').mouseleave(function(){
			// $('#u1').stop().slideUp(2000)
			$(this).children('ul').stop().slideUp(500)
		})