目的：

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

设计思路：

整体一个div-1 

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

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

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

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

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

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

原网页样式如下：

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

[code] 	<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样式设计：

[code].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;
}