简单的层级菜单(实例)

最新推荐文章于 2023-03-28 20:17:29 发布

Byfar_

最新推荐文章于 2023-03-28 20:17:29 发布

阅读量1.4k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_42107267/article/details/80549597

版权

本文通过实例详细讲解如何创建和管理简单的层级菜单，包括菜单结构的设计、递归处理及动态加载等关键步骤，旨在帮助开发者更好地理解和应用层级菜单在实际项目中的构建。

摘要由CSDN通过智能技术生成

<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>层级菜单</title>	
	<style type="text/css">
		body{
			font-family:'Microsoft Yahei';
		}
		body,ul{
			margin:0px;
			padding:0px;
		}
		ul{list-style:none;}
		.menu{
			width:200px;
			margin:20px auto 0;
		}
		.menu .level1,.menu li ul a{
			display:block;
			width:200px;
			height:30px;
			line-height:30px;
			text-decoration:none;
			background-color:#3366cc;
			color:#fff;
			font-size:16px;
			text-indent:10px;			
		}

		.menu .level1{
			border-bottom:1px solid #afc6f6;			
		}

		.menu li ul a{
			font-size:14px;
			text-indent:20px;
			background-color:#7aa1ef;					
		}

		.menu li ul li{
			border-bottom:1px solid #afc6f6;
		}
		.menu li ul{
			display:none;
		}

		.menu li ul.current{
			display:block;
		}

		.menu li ul li a:hover{
			backgrou