html二级菜单的创建[通俗易懂]

全栈程序员站长

发布于 2022-09-06 11:19:35

2.7K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

二级菜单用的是无序列表嵌套，：hover鼠标悬浮其上方发生的事

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{margin: 0;
			padding: 0;
			font-size: 40px;
			}
			a{
				color: #000000;
				text-decoration: none;
			}
			ul.caidan li{
				float: left;
				list-style: none;
				width: 200px;
				background-color: bisque;
			}
			ul.caidan li:hover{
				background-color: fuchsia;
			}
			ul.caidan li ul.erji{
				display: none;
			}
			ul.caidan li:hover ul.erji{
				display: block;
			}
			ul.caidan li:hover ul.erji li:hover{
				background-color: aqua;
			}
			.caidan{
				border: 1px solid black;
				width: 800px;
				margin: 0 auto;
			}
			
		</style>
	</head>
	<body>
		<ul class="caidan">
			<li>一级菜单<ul class="erji">
				<li><a href="">二级菜单</a></li>
				<li><a href="">二级菜单</a></li>
				<li><a href="">二级菜单</a></li>
			</ul></li>
			<li>一级菜单<ul class="erji">
				<li><a href="">二级菜单</a></li>
				<li><a href="">二级菜单</a></li>
				
			</ul></li>
			<li>一级菜单<ul class="erji">
				<li><a href="">二级菜单</a></li>
				<li><a href="">二级菜单</a></li>
				<li><a href="">二级菜单</a></li>
			</ul></li>
			<li><a href="">一级菜单</a></li>
		</ul>
	</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/133097.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年6月9，如有侵权请联系 cloudcommunity@tencent.com 删除

https