返回float 练......登陆

float 练习

大灰狼2019-07-07 19:03:0888
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>float 浮动</title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			ul li{
				list-style: none;
				float: left;
				background: #9AA4FF;
				margin: 5px;
				padding: 10px;
				border-radius: 5px;
				}
			ul li ul{display: none;}
			ul li:hover ul{display: block;}
			ul li ul li{float: none;}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>一级菜单1
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单2
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单3
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单4
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单5
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单6
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单7
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单8
					<ul>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

通过浮动练习一个二级菜单。

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网