html二级菜单的创建

最新推荐文章于 2024-05-05 07:41:03 发布

小贱贱LO

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量1.2w

点赞数 10

分类专栏： HTML 文章标签： html 二级菜单

本文链接：https://blog.csdn.net/zhang2542345400/article/details/90742799

版权

HTML 专栏收录该内容

1 篇文章 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>

小贱贱LO

关注

10
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
html二级菜单的创建

二级菜单用的是无序列表嵌套，：hover鼠标悬浮其上方发生的事<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{margin: 0; ...
复制链接

扫一扫