二级目录-----纯css（案例-淘宝导航栏（部分））

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>易淘</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css"/>
	<body>
		<nav id="header" class="header">
			<span><a class="tag" href="#">中国大陆</a>
			<ul>
				<li><a href="#">全球</a></li>
				<li><a href="#">中国大陆</a></li>
				<li><a href="#">香港</a></li>
				<li><a href="#">台湾</a></li>
				<li><a href="#">澳门</a></li>
				<li><a href="#">韩国</a></li>
				<li><a href="#">马来西亚</a></li>
				<li><a href="#">澳大利亚</a></li>
				<li><a href="#">新加坡</a></li>
				<li><a href="#">新西兰</a></li>
				<li><a href="#">加拿大</a></li>
				<li><a href="#">美国</a></li>
				<li><a href="#">日本</a></li>
			</ul>
			</span>
			<span><a href="#">亲，请登录</a></span>
			<span><a href="#">免费注册</a></span>
			<span><a href="#">手机淘宝</a></span>
			<span><a class="tag" href="#">我的淘宝</a>
			<ul>
				<li><a href="#">已卖到的宝贝</a></li>
				<li><a href="#">我的足迹</a></li>
			</ul>
			</span>
			<span><a class="Tag" href="#">购物车</a></span>
			<span><a  href="#">收藏夹</a>
			<ul>
				<li><a href="#">收藏的宝贝</a></li>
				<li><a href="#">收藏的店家</a></li>
			</ul>
			</span>
			<span><a href="#">商品分类</a></span>
			<span><a class="tag"  href="#">卖家中心</a>
			<ul>
				<li><a href="#">免费开店</a></li>
				<li><a href="#">已卖出的宝贝</a></li>
				<li><a href="#">出售中的宝贝</a></li>
				<li><a href="#">卖家服务市场</a></li>
				<li><a href="#">卖家培训中心</a></li>
				<li><a href="#">体验中心</a></li>
				<li><a href="#">问商友</a></li>
			</ul>
			</span>
			<span><a class="tag" href="#">联系客服</a>
			<ul>
			<li><a href="#">消费者客服</a></li>
			<li><a href="#">卖家客服</a></li>
			</ul>
			</span>
			<span><a class="tag" href="#">网站导航</a></span>
			<div style="clear: both;"></div>
		</nav>
	</body>
</html>
<!-- 这次的解决了二级目录上回的问题，上回问题为html元素空间分配不佳所导致，
所以写html页面也得仔细考虑结构问题（挺重要） -->

css:

html,
body {
	height: 100%;
	width: 100%;
}

* {
	margin: 0px;
	border: 0px;
}

.header {
	background: lavender;
}

a{
text-decoration: none;
color: black;
font-family: "仿宋";
}
/* 必须要设置为absolute,因为css层叠问题,,,
网址https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ */
ul{
	position: absolute;
	padding: 5px 0;
	margin-left: -6px;
	display: none;
	opacity: 0;/* 透明度 */
	list-style: none;
	border: 1px solid lavender;
	border-top: none;
}

ul li{margin-top: 10px;}

ul li:hover{background-color: lavender;}

.header span{
float: left;
padding: 5px 15px 5px 5px;
margin-left: 10px;
}

.header span:nth-child(1)>ul{
	width: 300px;
	height: 250px;
	overflow-y: scroll;
}
/* 图标 */
.Tag::after,
.tag::after{
	position: absolute;
	display: block;
	height: 3px;
	width: 3px;
	margin: -15px 0 0 70px;
	content: "";
	transform: rotateZ(45deg);
	border: 2px solid darkgray;
	border-top: none;
	border-left: none;
} 

.Tag::after{margin: -15px 0 0 53px;}

.header span>a:hover{color: orange;}

.header span:nth-child(1){}

.header span:nth-child(1):hover{background-color: white;}

.header span:nth-child(1):hover ul{
display: block;
opacity: 1;
left: 0px;
margin:5px 0 0 9px;
}

.header span:nth-child(2) a{color: orange;}

.header span:nth-child(2):hover a{}

.header span:nth-child(3) a:nth-child(1){}

.header span:nth-child(4){margin-right: 20%;}

.header span:nth-child(4) a:nth-child(1){}

.header span:nth-child(5) a:nth-child(5){}

.header span:nth-child(5):hover{background-color: white;}

.header span:nth-child(5):hover ul{
display: block;
opacity: 1;
}

.header span:nth-child(7):hover{background-color: white;}

.header span:nth-child(7):hover ul{
display: block;
opacity: 1;
}

.header span:nth-child(9):hover{background-color: white;}

.header span:nth-child(9):hover ul{
display: block;
opacity: 1;
}

.header span:nth-child(10):hover{background-color: white;}

.header span:nth-child(10):hover ul{
display: block;
opacity: 1;
}

截图：
在这里插入图片描述
总的来说：这次然我深深的感触到了html排版选用标签的重要性，空间分配，还有css层叠，菜鸟爬行中。。。。。

二级目录-----纯css（案例-淘宝导航栏（部分））

猜你喜欢