提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

导航栏显示二级菜单

显示 导航 菜单 二级
2023-09-27 14:19:49 时间 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			ul{
				list-style-type: none;
			}
			li{
				width: 100px;
				height: 40px;
				background-color: #DB7093;
				border: 1px solid #ADD8E6;
				text-align: center;
				line-height: 40px;
				font-size: 20px;
				float: left;
			}
			.u1 li li{
				display: none;
			}
			.u1>li:hover li{
				position: relative;
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="c1">
			<ul class="u1">
				<li>地区
					<ul>
						<li>商丘</li>
						<li>商丘2</li>
						<li>郑州</li>
						<li>武汉</li>
					</ul>
				</li>
				<li>爱好
					<ul>
						<li>篮球</li>
						<li>排球</li>
						<li>羽毛球</li>
						<li>动漫</li>
					</ul>
				</li>
				<li>订单</li>
				<li>登录</li>
				<li>详情</li>
			</ul>
		</div>
	</body>
</html>

效果展示:鼠标悬停在一级标题上,显示二级菜单
在这里插入图片描述

相关文章