使用js和css制作一个简单的下拉菜单

注：因为引用了layui的图标，所以要引用layui的css，不然下拉图标以及菜单图标都不会显示。
头部的html代码：

<div id='head'>
	<p class='title1'>
		<%=sTitle %>
		<i class='layui-icon' id='more' style='position:absolute;right:15px;' onclick='topMenu()'>&#xe625;</i>
	</p>
	<div style='width:100%;display:none;' id='topmenu'>
		<table class='tables' >
			<tr>
				<td width='120px' align='center'></td>
				<td widht='30%'></td>
				<td width='80px'><a href='contracttypeadd_mobile.jsp'><p style='text-align:center;'><i class='layui-icon' style='font-size:22px;'>&#xe608;</i></p><p style='font-size:11px;text-align:center;'>添加类型</p></a></td>
				<td width='80px'><a href='contracttypedellist_mobile.jsp'><p style='text-align:center;'><i class='layui-icon'  style='font-size:22px;'>&#xe60e;</i></p><p style='font-size:11px;text-align:center;'>删除记录</p></a></td>
			</tr>
		</table>
	</div>
</div>

css代码：

#head{
	position: fixed;
	top:0px;
	width:100%;
	z-index:1999;
}
.tables{
	width:100%;
	margin : 0 auto;
}
.tables td{
	text-align: left;
}
#topmenu{
	background: #fff;
	border: 1px solid #e6e6e6;
	border-top:none;
	z-index:1999;
	top:34px;
}

js代码：

var i =0;
function topMenu(){
	if(i==0){
		$("#topmenu").css("display",'');
		$("#topmenu").css("position",'fixed');
		$("#more").css("transform", "rotate(180deg)");
		i=1;
	}else{
		$("#topmenu").css("display",'none');
		$("#topmenu").css("position",'state');
		$("#more").css("transform", "rotate(0deg)");
		i=0;
	}
}

效果图：