制作京东购物车导航栏，包含html+css完整代码

最新推荐文章于 2025-03-17 17:01:43 发布

柠檬精不吃柠檬

最新推荐文章于 2025-03-17 17:01:43 发布

阅读量817

点赞数 3

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_74937643/article/details/139031087

版权

效果图，所有下拉列表均可显示

html完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/main.css" type="text/css" />
	</head>
	<body>
		<header>
			<div class="header-wrap">
				<!-- 导航条左部分框架 -->
				<div class="nav-left">
					<ul class="ul-left">
						<li>
							<img src="img/home.png" alt="#" class="home-logo" />
							<a href="#">京东首页</a>
						</li>
						<li class="location-list">
							<div class="location"><img src="img/location.png" alt="#" class="location-logo" />天津</div>
							<!-- 位置选择隐藏框架 -->
							<div class="location-wrap">
								<div class="province-wrap">
									<div class="province"><a href="#">北京</a></div>
									<div class="province"><a href="#">上海</a></div>
									<div class="province"><a href="#">天津</a></div>
									<div class="province"><a href="#">重庆</a></div>
									<div class="province"><a href="#">河北</a></div>
									<div class="province"><a href="#">山西</a></div>
									<div class="province"><a href="#">河南</a></div>
									<div class="province"><a href="#">辽宁</a></div>
									<div class="province"><a href="#">吉林</a></div>
									<div class="province"><a href="#">黑龙江</a></div>
									<div class="province"><a href="#">内蒙古</a></div>
									<div class="province"><a href="#">江苏</a></div>
									<div class="province"><a href="#">山东</a></div>
									<div class="province"><a href="#">安徽</a></div>
									<div class="province"><a href="#">浙江</a></div>
									<div class="province"><a href="#">福建</a></div>
									<div class="province"><a href="#">湖北</a></div>
									<div class="province"><a href="#">湖南</a></div>
									<div class="province"><a href="#">广东</a></div>
									<div class="province"><a href="#">广西</a></div>
									<div class="province"><a href="#">江西</a></div>
									<div class="province"><a href="#">四川</a></div>
									<div class="province"><a href="#">海南</a></div>
									<div class="province"><a href="#">贵州</a></div>
									<div class="province"><a href="#">云南</a></div>
									<div class="province"><a href="#">西藏</a></div>
									<div class="province"><a href="#">陕西</a></div>
									<div class="province"><a href="#">甘肃</a></div>
									<div class="province"><a href="#">青海</a></div>
									<div class="province"><a href="#">宁夏</a></div>
									<div class="province"><a href="#">新疆</a></div>
									<div class="province"><a href="#">港澳</a></div>
									<div class="province"><a href="#">台湾</a></div>
									<div class="province"><a href="#">钓鱼岛</a></div>
									<div class="province"><a href="#">海外</a></div>
								</div>
								<div class="district-exclusive">
									<div class="district-split"></div>
									<p>地区专享版本</p>
									<div class="district"><a href="#">中國港澳</a></div>
									<div class="district"><a href="#">中國台湾</a></div>
									<div class="district"><a href="#">京东全球</a></div>
								</div>
								<div class="district-exclusive">
									<div class="district-split"></div>
									<p>Available Sites
									<p>
									<div class="district"><a href="#" class="icon icon1">Global Site</a></div>
									<div class="district"><a href="#" class="icon icon2">Сайт России</a></div>
									<div class="district"><a href="#" class="icon icon3">Situs Indonesia</a></div>
									<div class="district"><a href="#" class="icon icon4">Sitio de España</a></div>
									<div class="district"><a href="#" class="icon icon5">เว็บไซต์ประเทศไทย</a></div>
								</div>
								<div></div>
							</div>
						</li>
					</ul>
				</div>
				<!-- 导航条右部分框架 -->
				<div class="nav-right">
					<ul>
						<li class="right-fore1 nav-right-fore">
							<div class="fore"><a href="#">天晴30442<span>PLUS</span><img src="img/jt.png" alt="#" /></a>
							</div>
							<div class="fore-wrap">
								<div class="fore1">
									<div class="fore1-l">
										<img src="img/no-img_mid_.jpg" alt="" />
									</div>
									<div class="fore1-r">
										<div class="fore1-r-top">
											<div class="plus"></div>
											<div class="tui"><a href="#">退出</a></div>
										</div>
										<div class="fore1-r-bottom"><a href="#">开通PLUS 平均省1012元/年></a></div>
									</div>
								</div>
								<div class="fore1-split"></div>
								<div class="fore1-bottom">
									<div class="fore1-icon"><a href="#"><img src="img/jiantou-l.png" alt="#" /></a>
									</div>
									<div class=" fore1-c">
										<a href="#"><img src="img/fore-icon1.png" alt="" />
										</a>
									</div>
									<div class=" fore1-c">
										<a href="#"><img src="img/fore-icon2.png" alt="" width="56px" />
										</a>
									</div>
									<div class=" fore1-c">
										<a href="#"><img src="img/fore-icon2.png" alt="" />
										</a>
									</div>
									<div class="fore1-icon"><a href="#"><img src="img/jiantou-r.png" alt="#" /></a>
									</div>
								</div>
								<div class="fore1-txt">
									<a href="#"><span id="use">免费使用</span></a>
									<a href="#">运费单免</a>
									<a href="#">生日特权</a>
								</div>
							</div>
						</li>
						<!-- 标题旁分割线 -->
						<li class="spacer"></li>
						<li class="right-fore2">
							<div class="fore"><a href="#">我的订单</a></div>
						</li>
						<li class="spacer"></li>
						<li class="right-fore3 nav-right-fore">
							<div class="fore"><a href="#">我的京东</a><img src="img/jt.png" alt="#" /></div>
							<div class="fore-wrap">
								<div class="fore-a fore3-a">
									<div class="myjd"><a href="#">待处理订单</a></div>
									<div class="myjd"><a href="#">我的问答</a></div>
									<div class="myjd"><a href="#">返修退换货</a></div>
									<div class="myjd"><a href="#">我的关注</a></div>
									<div class="myjd"><a href="#">降价商品</a></div>
								</div>
								<div class="fore3-split"></div>
								<div class="fore-a fore3-a">
									<div class="myjd"><a href="#">我的京豆</a></div>
									<div class="myjd"><a href="#">我的优惠券</a></div>
									<div class="myjd"><a href="#">我的白条</a></div>
									<div class="myjd"><a href="#">我的理财</a></div>
								</div>
							</div>
						</li>
						<li class="spacer"></li>
						<li class="right-fore4 nav-right-fore">
							<div class="fore"><a href="#">企业采购</a><img src="img/jt.png" alt="#" /></div>
							<div class="fore-wrap">
								<div class="fore-a fore4-a">
									<div class="enterprice-pro"><a href="#">企业购</a></div>
									<div class="enterprice-pro"><a href="#">公共采购</a></div>
									<div class="enterprice-pro"><a href="#">工业品</a></div>
									<div class="enterprice-pro"><a href="#">商用场景馆</a></div>
									<div class="enterprice-pro"><a href="#">礼品卡</a></div>
									<div class="enterprice-pro"><a href="#">微信企业购</a></div>
									<div class="enterprice-pro"><a href="#">工品优选</a></div>
									<div class="enterprice-pro"><a href="#">京东锦礼</a></div>
									<div class="enterprice-pro"><a href="#">大中型客户采购</a></div>
								</div>
							</div>
						</li>
						<li class="spacer"></li>
						<li class="right-fore5 nav-right-fore">
							<div class="fore">客户服务<img src="img/jt.png" alt="#" /></div>
							<div class="fore-wrap2">
								<div class="fore-a fore5-a">
									<p>客户</p>
									<div class="custmor"><a href="#">帮助中心</a></div>
									<div class="custmor"><a href="#">售后服务</a></div>
									<div class="custmor"><a href="#">在线客服</a></div>
									<div class="custmor"><a href="#">意见提议</a></div>
									<div class="custmor"><a href="#">电话客服</a></div>
									<div class="custmor"><a href="#">客服邮箱</a></div>
									<div class="custmor"><a href="#">金融咨询</a></div>
									<div class="custmor"><a href="#">全球售客服</a></div>
									<div class="custmor"><a href="#">企业客服</a></div>
								</div>
								<div class="fore5-split"></div>
								<div class="fore-a fore5-a">
									<p>商户</p>
									<div class="custmor"><a href="#">企业招商</a></div>
									<div class="custmor"><a href="#">学习中心</a></div>
									<div class="custmor"><a href="#">商家后台</a></div>
									<div class="custmor"><a href="#">京麦工作台</a></div>
									<div class="custmor"><a href="#">商家帮助</a></div>
									<div class="custmor"><a href="#">规则平台</a></div>
								</div>
							</div>
						</li>
						<li class="spacer"></li>
						<li class="right-fore6 nav-right-fore">
							<div class="fore">网站导航<img src="img/jt.png" alt="#" /></div>
							<div class="fore-wrap2">
								<div class="fore6-a-wrap">
									<div class="fore-a fore6-a fore6-a1">
										<p>特色主题</p>
										<div class="characteristic-theme"><a href="#">京东金融</a></div>
										<div class="characteristic-theme"><a href="#">全球售</a></div>
										<div class="characteristic-theme"><a href="#">台湾售</a></div>
										<div class="characteristic-theme"><a href="#">装机大师</a></div>
										<div class="characteristic-theme"><a href="#">港澳售</a></div>
										<div class="characteristic-theme"><a href="#">秒杀</a></div>
										<div class="characteristic-theme"><a href="#">陪伴计划</a></div>
										<div class="characteristic-theme"><a href="#">出海招商</a></div>
										<div class="characteristic-theme"><a href="#">拍拍二手</a></div>
									</div>
									<div class="fore6-split"></div>
									<div class="fore-a fore6-a fore6-a2">
										<p>行业频道</p>
										<div class="industry-channel"><a href="#">手机</a></div>
										<div class="industry-channel"><a href="#">电脑办公</a></div>
										<div class="industry-channel"><a href="#">家用电器</a></div>
										<div class="industry-channel"><a href="#">京东小家</a></div>
										<div class="industry-channel"><a href="#">京东生鲜</a></div>
										<div class="industry-channel"><a href="#">母婴</a></div>
										<div class="industry-channel"><a href="#">食品</a></div>
										<div class="industry-channel"><a href="#">农资频道</a></div>
										<div class="industry-channel"><a href="#">整车</a></div>
										<div class="industry-channel"><a href="#">图书</a></div>
										<div class="industry-channel"><a href="#">劳动防护</a></div>
									</div>
									<div class="fore6-split"></div>
									<div class="fore-a fore6-a fore6-a2">
										<p>生活服务</p>
										<div class="live"><a href="#">白条</a></div>
										<div class="live"><a href="#">京东金融App</a></div>
										<div class="live"><a href="#">京东小金库</a></div>
										<div class="live"><a href="#">花费</a></div>
										<div class="live"><a href="#">水电煤</a></div>
										<div class="live"><a href="#">彩票</a></div>
										<div class="live"><a href="#">机票酒店</a></div>
										<div class="live"><a href="#">电影票</a></div>
										<div class="live"><a href="#">京东到家</a></div>
										<div class="live"><a href="#">游戏</a></div>
										<div class="live"><a href="#">拍拍回收</a></div>
										<div class="live"><a href="#">买车险</a></div>
									</div>
									<div class="fore6-split"></div>
									<div class="fore-a fore6-a fore6-a2">
										<p>更多精选</p>
										<div class="more"><a href="#">合作招商</a></div>
										<div class="more"><a href="#">京东通信</a></div>
										<div class="more"><a href="#">京东E卡</a></div>
										<div class="more"><a href="#">企业采购</a></div>
										<div class="more"><a href="#">服务市场</a></div>
										<div class="more"><a href="#">校园加盟</a></div>
										<div class="more"><a href="#">知识产权维权</a></div>
										<div class="more"><a href="#">京东安联保险</a></div>
										<div class="more"><a href="#">京东保险代理</a></div>
										<div class="more"><a href="#">京东零售云</a></div>
										<div class="more"><a href="#">关于我们</a></div>
									</div>
								</div>
							</div>
						</li>
						<li class="spacer"></li>
						<li class="right-fore7 nav-right-fore">
							<div class="fore"><a href="#">手机京东</a></div>
							<div class="fore-wrap2">
								<div class="fore7-a-wrap">
									<div class="fore-a fore7-a">
										<div class="fore7-l"><img src="img/JD.jpg" alt="#" /></div>
										<div class="fore7-r">
											<a href="#">手机京东</a>
											<p class="fore7-text">新人专享礼包</p>
											<img src="img/JD.png" alt="#" />
										</div>
										<div class="fore7-split"></div>
									</div>
									<div class="fore-a fore7-a">
										<div class="fore7-l"><img src="img/JD2.jpg" alt="#" /></div>
										<div class="fore7-r">
											<a href="#">关注京东微信</a>
											<p class="fore7-text">微信扫一扫关注<br />京东服务号订阅<br />更多促销优惠福利</p>
										</div>
										<div class="fore7-split"></div>
									</div>
									<div class="fore-a fore7-a">
										<div class="fore7-l"><img src="img/JD3.jpg" alt="#" /></div>
										<div class="fore7-r">
											<a href="#">京东金融客户端</a>
											<p class="fore7-text">新人专享礼包</p>
											<img src="img/JD3.png" alt="#" />
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="spacer"></li>
						<li class="right-fore8">
							<div class="fore"><a href="#">网站无障碍</a></div>
						</li>
					</ul>
				</div>
			</div>
		</header>
		<script src="js/js-main.js" type="text/javascript"></script>
	</body>
</html>

css样式完整代码，布局用到display：flex

* {
	margin: 0;
	padding: 0;
}

header li {
	list-style: none;
}

header {
	width: 100%;
	height: 30px;
	font-size: 12px;
	color: #999;
	background-color: rgb(227, 228, 229);
}

.header-wrap {
	width: 990px;
	margin: 0 auto;
	height: 30px;
	line-height: 30px;
	background-color: rgb(227, 228, 229);
	display: flex;
	justify-content: space-between;
}

.header-wrap .nav-left {
	width: 156px;
	height: 30px;
}

/* 导航条左边列表京东首页样式 */
.header-wrap .nav-left li:first-of-type {
	width: 73px;
	padding-left: 2px;
	padding-right: 2px;
}

/* 导航条左边列表左浮动 */
.nav-left .ul-left li {
	float: left;
}

/* logo样式 */
.nav-left .home-logo {
	width: 18px;
	height: 16.8px;
	vertical-align: middle;
}
/* 定位图标 */
.nav-left .location-logo {
	width: 12px;
	height: 15px;
	padding-right: 6px;
	vertical-align: middle;
}

/* 导航条左边列表位置样式 */
.header-wrap .nav-left li:last-of-type {
	width: 78.56px;
}

.location {
	width: 45px;
	padding-left: 10px;
	padding-right: 25px;
}

/* 位置选择隐藏框样式 */
.nav-left ul li .location-wrap {
	width: 300px;
	padding: 10px 0 10px 10px;
	position: absolute;
	top: 30px;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	z-index: 9999;
	display: none;
}

/* 省份选择，采用弹性盒子布局 */
.province-wrap {
	width: 300px;
	margin-left: 6px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
}

/* 设置每个省份div样式 */
.province-wrap .province {
	width: 60px;
	height: 24px;
	line-height: 24px;
	padding: 2px 0;
}

/* 地区专享，采用弹性盒子布局 */
.district-exclusive {
	width: 290px;
	margin: 10px 0 10px 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
}

/* 当鼠标悬停在位置上时所显示的样式 */
.ul-left .location-list .location:hover {
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom: none;
}

/* 当鼠标悬停时弹出隐藏框 */
.ul-left .location-list:hover .location-wrap {
	display: block;
}

/* 地区分割线 */
.district-split {
	width: 262px;
	height: 0;
	border-bottom: dotted 1px #eeeeef;
}

/* 地区专享标题样式 */
.district-exclusive p {
	width: 290px;
	margin-top: 9px;
}

/* 设置地区div样式 */
.district-exclusive .district {
	width: 145px;
	height: 26px;
	line-height: 24px;
}

/* 设置地区背景图标样式 */
.district-exclusive .district .icon {
	padding-left: 25px;
	background-size: 16px;
	background-position: 0px 2px;
}

.district-exclusive .district .icon1 {
	background-image: url("../img/icon1.png");
	background-repeat: no-repeat;
	background-size: 14px;
	background-position: 2px;
}

.district-exclusive .district .icon2 {
	background-image: url("../img/icon2.png");
	background-repeat: no-repeat;
}

.district-exclusive .district .icon3 {
	background-image: url("../img/icon3.png");
	background-repeat: no-repeat;
}

.district-exclusive .district .icon4 {
	background-image: url("../img/icon4.png");
	background-repeat: no-repeat;
}

.district-exclusive .district .icon5 {
	background-image: url("../img/icon5.png");
	background-repeat: no-repeat;
}

/* 导航条右边样式 */
.nav-right {
	width: 730px;
	display: flex;
	justify-content: flex-start;
}

.nav-right ul li {
	float: left;
	padding: 0 2px;
}

/* 标题旁小箭头 */
.nav-right ul li .fore img {
	width: 12px;
	height: 12px;
	vertical-align: middle;
	padding-left: 8px;
}

/* 标题旁分割线 */
.nav-right ul .spacer {
	width: 1px;
	height: 12px;
	margin-top: 9px;
	padding: 0;
	background: #ccc;
}

/* 设置标题间距，定义标题为相对定位 */
.nav-right ul li .fore {
	padding: 0 8px;
	position: relative;
}

/* PLUS样式 */
.nav-right ul .right-fore1 span {
	padding: 0 3px;
	background-color: #d7d4cb;
	border-radius: 2px;
	color: white;
	font-weight: bold;
	margin: 0 6px;
}

/* 定义Li为相对定位 */
.nav-right-fore {
	position: relative;
}

/* 设置隐藏款的样式，定义其为绝对定位 */
.nav-right ul li .fore-wrap {
	/* width: 250px; */
	padding: 10px 0 10px 10px;
	position: absolute;
	left: 0;
	top: 30px;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	display: none;
}

.nav-right ul li .fore-wrap2 {
	/* width: 250px; */
	padding: 10px 0 10px 10px;
	position: absolute;
	right: 0;
	top: 30px;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	display: none;
	z-index: 999999;
}

/* 当鼠标悬停时，li的样式 */
.nav-right ul .nav-right-fore:hover {
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom: none;
}

/* 当鼠标悬停时弹出隐藏框 */
.nav-right ul .nav-right-fore:hover .fore-wrap {
	display: block;
}

/* 当鼠标悬停时弹出隐藏框 */
.nav-right ul .nav-right-fore:hover .fore-wrap2 {
	display: block;
}

/* 分别给不同li下面的隐藏框设置其样式 */
.fore1 {
	/* padding: 10px 0 10px 15px; */
	display: flex;
	justify-content: space-around;
}

.fore-wrap .fore1 .fore1-l {
	width: 60px;
	/* margin-left: -10px; */
}

.fore-wrap .fore1 .fore1-l img {
	width: 60px;
	height: 60px;
	border-radius: 30px;
}

.fore-wrap .fore1 .fore1-r {
	padding-left: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.plus {
	padding: 0 3px;
	height: 18px;
	line-height: 18px;
	background-color: #d7d4cb;
	font-size: 12px;
	border-radius: 2px;
	color: white;
	font-weight: bold;
	margin: 4px 2px;
	
}

.fore-wrap .fore1 .fore1-r-top {
	width: 178px;
}

.fore-wrap .fore1 .fore1-r-top .plus {
	float: left;
}

.fore-wrap .fore1 .fore1-r-top .tui {
	float: right;
	padding-right: 8px;
}
/* 设置分割线样式 */
.fore1-split {
	margin-left: -10px;
	padding-top: 10px;
	width: 260px;
	height: 0;
	border-bottom: 1px solid #ddd;
}

.fore1-bottom {
	padding-right: 10px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	/* align-items: flex-start; */
}

.fore1-icon {
	height: 56px;
	line-height: 56px;
}

.fore1-icon img {
	width: 12px;
	height: 12px;
}

.fore1-c img {
	width: 56px;
	height: 56px;
}

.fore-wrap .fore1-txt a {
	/* margin-left: 5px; */
	padding-left: 14px;
	padding-top: 2px;
}

#use {
	padding: 2px 1px;
	background-color: rgb(206, 170, 98);
	font-weight: normal;
	margin-left: 12px;
}

/* 隐藏框的布局均采用弹性布局 ，给父级标签添加flex*/
.fore-a {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.right-fore3 .fore-wrap .fore3-a {
	width: 280px;
}
/* 设置隐藏框内部内容样式 */
.right-fore3 .fore-wrap .fore3-a .myjd {
	width: 140px;
	height: 24px;
	text-indent: 5px;
	line-height: 24px;
}

/* split为分割线 */
.fore3-split {
	width: 290px;
	height: 0;
	margin-left: -10px;
	padding: 5 0px;
	border-bottom: 1px solid #eeeeef;
}

.fore4-a {
	width: 140px;
}

.fore4-a .enterprice-pro {
	width: 60px;
	height: 24px;
	line-height: 24px;
}

.fore4-a div:last-child {
	width: 90px;
}

.fore5-a {
	width: 150px;
}

.fore5-a .custmor {
	width: 70px;
	height: 24px;
	text-indent: 5px;
	line-height: 24px;
}

.fore5-a p {
	width: 140px;
	color: black;
	font-weight: bold;
	height: 24px;
	line-height: 24px;
}

.fore5-split {
	width: 160px;
	height: 0;
	margin-left: -10px;
	padding-top: 20 0px;
	border-bottom: 1px solid #eeeeef;
}

.right-fore6 .fore-wrap2 .fore6-a-wrap {
	display: flex;
	/* width: 988px; */
	/* flex-wrap: wrap; */
	justify-content: flex-start;
	/* align-items: flex-start; */
}

.right-fore6 .fore-wrap2 .fore-a2 {

	height: 170px;
}

.fore6-a p {
	color: black;
	font-size: 16px;
	font-weight: bold;
	width: 202px;
	padding-bottom: 10px;
}

.fore6-a1 {
	width: 301px;
	height: 90px;
	margin-left: 10px;
}

.fore6-a1 .characteristic-theme,
.industry-channel,
.live,
.more {
	width: 100px;
	height: 24px;
	line-height: 24px;
}

.fore6-a2 {
	width: 200px;
}

.fore6-split {
	height: 180px;
	width: 0;
	margin-right: 16px;
	border-left: 1px solid #eeeeef;
}

.fore7-a-wrap {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	/* align-items: space-aroud; */
}

.fore7-a {
	width: 190px;
	height: 110px;
	line-height: 110px;
}

.fore7-a .fore7-l {
	width: 76px;
	height: 76px;
	line-height: 76px;
	border: 1px solid #ddd;

}

.fore7-a .fore7-l img {
	width: 74px;
	height: 74px;
	margin: 1px;
}

.fore7-a .fore7-r {
	width: 100px;
	height: 24px;
	line-height: 24px;
	padding-left: 6px;
}

.fore7-a .fore7-r a {
	color: rgb(102, 102, 102);
	font-size: 12px;
}

.fore7-a .fore7-r img {
	height: 25px;
}

.fore7-text {
	color: rgb(241, 2, 20);
	/* padding-bottom: 1px; */
	margin-bottom: 5px;
}

.fore7-split {
	width: 200px;
	height: 0;
	margin-left: -10px;
	/* padding: 5px 0 ; */
	border-bottom: 1px solid #eeeeef;
}

/* 给头部所有的超链接设置样式 */
header li a:link {
	color: #999;
	text-decoration: none;
}

header li a:visited {
	color: #999;
	text-decoration: none;
}

header li a:hover {
	color: #fa2c19;
	text-decoration: none;
}