美团网官网最新底部导航页面制作及CSS样式设计

目的：

实现美团网站底部的导航页面的设计

设计思路：

整体一个div-1 

整体可分为上下两部分：上为——浅绿色背景；下为选项及选项内容

上部分的左侧设置一个div，存放美团导航文字内容

使用ul>li无序列表存放每个选项：热门城市、热门分类、周边热门

其中每个<li>包括左侧的文本以及右侧的展开选项。

右侧展开选项设置为两个<ul>无序列表。

具体div数目及包含关系见html代码

原网页样式如下：

菜鸟样式设计如下： 1.HTML代码设计：

 	<div class="links sec1170 mb10">
 		<div class="links_navbox">
 			<div class="links_catebox">
 				<h2>美团导航</h2>
 				<ul class="links_category">
	 				<li class="links_cateitem">
	 					<h3>热门城市</h3>
	 					<div class="links_right1">
	 						<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>
	 						</ul>
	 						<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>
	 						</ul>
	 					</div>
	 				</li>
	 				<li class="links_cateitem">
	 					<h3>热门分类</h3>
	 						<div class="links_right1 links_right2">
	 							<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>
	 							</ul>
	 							<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>

	 							</ul>
	 						</div>
	 				</li>
	 				<li class="links_cateitem">
	 					<h3>周边热门</h3>
	 					<div class="links_right1 links_right3">
	 						<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>	 
	 						</ul>
	 						<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>
	 						</ul>						
	 					</div>
	 				</li>
	 			</ul>
		 	</div>
 		</div> 	
 	
 	</div>

 2.CSS样式设计：

.sec1170{           /*给所有大的区块一个统一的样式*/
	width:1170px;
	margin:0 auto;
}
.mb10{
	margin-bottom: 10px;
}
.links{
	height: 280px;
	border:1px solid #ddd;
}
.links_navbox{
	height: 40px;
	background: #2bb8aa;
	line-height: 40px;
}
.links_navbox h2{
/*左侧字体*/
	width:110px;
	height: 40px;
	text-align: center;
	color:#fff;
}

.links_catebox{
	position: relative;/*父级元素设为相对定位方便后面子元素绝对定位*/
}
.links_category{
position: absolute;/*相对于catebox绝对定位*/
width: 110px;

}
.links_cateitem{
	height: 78px;
	line-height: 40px;
	margin-left:20px;
}
.links_right1{
/*右侧具体选项*/
	width: 1060px;
	height: 75px;
	left:110px;
	top:0px;
	position: absolute;/*相对于catebox绝对定位*/
	border-bottom:1px solid #ddd;
	margin-top: 8px;
	margin-bottom: 5px;
}
.links_right1 ul{
	display: inline-block;/*为了让两个ul并列*/
}
.links_right1 li{
	height: 25px;
	width: 80px;
	text-align: left;
	line-height: 25px;
	float: left;
	overflow: hidden;/*溢出部分隐藏*/
	text-overflow: ellipsis;/*字溢出的部分显示为"..."*/
	white-space: nowrap;/*表示不换行*/
	margin-right: 15px;
}
.links_right2{
/*表示第二行li*/
	top:80px;
}
.links_right3{
/*表示第三行li*/
	top:160px;
	border-bottom: none;
}