js点击式下拉菜单与悬浮式下拉菜单

点击出现下拉菜单
HTML部分

<div id="clickOpen">
			点击展开
</div>
<br />
<ul class="list">
	<li class="item">收藏的商品</li>
	<li class="item">收藏的店铺</li>
</ul>

css部分

#clickOpen {
			display: inline;
			padding: 5px 20px;
			background-color: aquamarine;
			cursor: pointer;
		}		
.list {
		display: inline-block;
		list-style: none;
		background-color: coral;
		padding: 0 12px;
		margin-top: 5px;
		display: none;
	}

js部分

var clickBtn=document.getElementById('clickOpen');
var list=document.getElementByClassName('list');
var isOpen=false;

clickBtn.addEventListener('click',function(){
isOpen=!isOpen;
if(isOPen){
   clickBtn.innerHTML='点击隐藏';
   clickBtn.style.display='inline-block';
else{
   clickBtn.innerHTML='点击展开';
   clickBtn.style.display='none';
   }
}
})

鼠标悬浮出现下拉菜单
HTML部分

<ul class="nav">
	<li id="li1">
		<a href="#">UI设计</a>
		<ul id="ul1">
			<li>界面设计</li>
			<li>界面设计</li>
			<li>界面设计</li>
		</ul>
	</li>
	<li id="li2" style="margin-right: 0;">
		<a href="#">WEB前端</a>
		<ul id="ul2">
			<li>HTML5</li>
			<li>HTML5</li>
			<li>HTML5</li>
		</ul>
	</li>
</ul>

css部分

*{
    margin: 0 auto;
    padding: 0;
	list-style: none;
}
.nav{
	width: 210px;
	height: 40px;
	background-color: skyblue;
	margin: 100px auto;
	line-height: 40px;
	text-align: center;
	}
a{
	color: white;
	text-decoration: none;
	}
.nav li{
	width: 100px;
	height: 40px;
	background-color: skyblue;
	color: white;
	font-size: 12px;
	}
.nav>li{
	float: left;
	margin-right: 10px;
	position: relative;			
	}
.nav>li:last-child{
	margin-right: 0;
	}
.nav li ul{
	position: absolute;
	left: 0;
	top: 40px;
	display: none;
	}
/*若要加上缓缓展开，缓缓隐藏的效果则把上面的.nav ul li注释掉，改为以下，同时js部分中display属性改为height=120px与0即可*/
.nav li ul{
	position: absolute;
	left: 0;
	top: 40px;
	height: 0;
	overflow: hidden;
	transition: height 0.3s;
	}

js部分

<script>			
//获取需要用到的标签
//如果遇到大量重复的代码时，可以通过封装函数来节省代码
//在自定义函数中，有不断发生变化的数据，就可以定义为参数
			function nav(liID,ulID){
				var oLi=document.getElementById(liID);
			var oUl=document.getElementById(ulID);
			
			oLi.onmouseover=function(){
				oUl.style.display='block';
			}
			oLi.onmouseout=function(){
				oUl.style.display='none';
			}
			}
			nav('li1','ul1');
			nav('li2','ul2');			
</script>