使用JS制作水平弹出式菜单

1. 定义框架

<style type="text/css">   
	*{		/*对所有内外标签急性初始化*/
		margin:0; 
		padding:0;
	}    
	.menu{
		position:relative;
		z-index:100;	/*垂直浏览*/
	}    
	.menu ul li {		/**/
		font-size:14px; 	/*设定菜单项文字的大小*/
		list-style:none; 	/*设定无列表符号*/
		float:left; 		/*菜单并排*/
		position:relative;
		width:180px;height:30px;	/*设定列表的宽高*/
		background:#FF00FF;  /*主菜单项背景颜色为桃红色*/
		line-height:35px;	/*设定行高*/
		text-align:center;  /*菜单项对齐方式*/
		margin-left:5px;	/*外边距*/
	} 
	.menu ul li a:hover{
		background:#FF0000; /*鼠标位于主菜单项上时背景颜色变为深红色*/
	}   
	.menu ul li ul {	/*一级标签*/
	    display:none;  /*不显示子菜单*/
	} 	
	.menu ul li ul li {		/*二级标签*/
	    font-size:13px; 	/*设定子菜单项文字的大小*/
	    float:none; 	 /*取消并排，浮动取消*/
		position:relative;
	} 
	.menu ul li a{
		display:block;		/*块状显示*/
		text-decoration:none;
		}    
	.menu ul li ul li a:hover{
		border:0;	/*边框为0*/
		border-bottom:1px solid #fff;	/*底部边框 1px，实线*/
		background-color: #FFF; 	/*鼠标位于子菜单项上时背景颜色改变为白色*/
	}   
</style>

2. 在div中写入栏目信息

<div class="menu">   <!--整个菜单被当作一个项目列表-->
	<ul>   
		<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"> 
			<a href="#">信息学院</a> 
			<ul><li><a href="#">信息学院->软件工程</a></li> 
				<li><a href="#">信息学院->大数据工程</a></li> 
				<li><a href="#">信息学院->通信工程</a></li>
				<li><a href="#">信息学院->物联网工程</a></li>
				<li><a href="#">信息学院->电子信息工程</a></li></ul></li> 
		<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"> 
			<a href="#">商学院</a> 
			<ul><li><a href="#">商学院->会计</a></li> 
				<li><a href="#">商学院->市场营销</a></li> 
				<li><a href="#">商学院->工商管理</a></li> 
				<li><a href="#">商学院->金融学</a></li> 
				<li><a href="#">商学院->国际贸易</a></ul> </li></ul> </div> 

3. JavaScript 部分

<script> 
	function displaySubMenu(li) { 
        //获取主菜单项里的列表，获取第一个ul
		var Nenu = li.getElementsByTagName("ul")[0]; 	
        //在 JS脚本里改变对象的CSS样式属性
		Nenu.style.display = "block"; //显示子菜单
	} 
	function hideSubMenu(li) {
		var Menu1 = li.getElementsByTagName("ul")[0];   
		Menu1.style.display = "none"; //隐藏子菜单
	} 
</script>

完整代码如下所示：

<meta charset="UTF-8">
<title>使用JS制作水平弹出式菜单</title>   
<style type="text/css">   
	*{		/*对所有内外标签急性初始化*/
		margin:0; 
		padding:0;
	}    
	.menu{
		position:relative;
		z-index:100;	/*垂直浏览*/
	}    
	.menu ul li {		/**/
		font-size:14px; 	/*设定菜单项文字的大小*/
		list-style:none; 	/*设定无列表符号*/
		float:left; 		/*菜单并排*/
		position:relative;
		width:180px;height:30px;	/*设定列表的宽高*/
		background:#FF00FF;  /*主菜单项背景颜色为桃红色*/
		line-height:35px;	/*设定行高*/
		text-align:center;  /*菜单项对齐方式*/
		margin-left:5px;	/*外边距*/
	} 
	.menu ul li a:hover{
		background:#FF0000; /*鼠标位于主菜单项上时背景颜色变为深红色*/
	}   
	.menu ul li ul {	/*一级标签*/
	    display:none;  /*不显示子菜单*/
	} 	
	.menu ul li ul li {		/*二级标签*/
	    font-size:13px; 	/*设定子菜单项文字的大小*/
	    float:none; 	 /*取消并排，浮动取消*/
		position:relative;
	} 
	.menu ul li a{
		display:block;		/*块状显示*/
		text-decoration:none;
		}    
	.menu ul li ul li a:hover{
		border:0;	/*边框为0*/
		border-bottom:1px solid #fff;	/*底部边框 1px，实线*/
		background-color: #FFF; 	/*鼠标位于子菜单项上时背景颜色改变为白色*/
	}   
</style>

<div class="menu">   <!--整个菜单被当作一个项目列表-->
	<ul>   
		<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"> 
			<a href="#">信息学院</a> 
			<ul><li><a href="#">信息学院->软件工程</a></li> 
				<li><a href="#">信息学院->大数据工程</a></li> 
				<li><a href="#">信息学院->通信工程</a></li>
				<li><a href="#">信息学院->物联网工程</a></li>
				<li><a href="#">信息学院->电子信息工程</a></li></ul></li> 
		<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"> 
			<a href="#">商学院</a> 
			<ul><li><a href="#">商学院->会计</a></li> 
				<li><a href="#">商学院->市场营销</a></li> 
				<li><a href="#">商学院->工商管理</a></li> 
				<li><a href="#">商学院->金融学</a></li> 
				<li><a href="#">商学院->国际贸易</a></ul> </li></ul> </div> 
<script> 
	function displaySubMenu(li) { 
        //获取主菜单项里的列表，获取第一个ul
		var Nenu = li.getElementsByTagName("ul")[0]; 	
        //在 JS脚本里改变对象的CSS样式属性
		Nenu.style.display = "block"; //显示子菜单
	} 
	function hideSubMenu(li) {
		var Menu1 = li.getElementsByTagName("ul")[0];   
		Menu1.style.display = "none"; //隐藏子菜单
	} 
</script> 

执行结果：

结束语

若这篇文章有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有什错误，欢迎大家指教。