美团的导航栏的下拉菜单
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>北京美团网</title> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body> <div> <nav> <ul class="nav_left"> <li><a href="">北京</a></li> <li><a href="">切换城市</a></li> <li><a href="">[ 大厂回族自治县 廊坊 固安县 ]</a></li> <li><a href="" style="color: #13D1BE;margin-left: 25px;">立即登录</a></li> <li><a href="">注册</a></li> </ul> <ul class="nav_right"> <li><a href="">网站导航</a></li> <li><a href="">商家中心 <ul> <li>登陆商家中心</li> <li>美团智能收银</li> <li>我想合作</li> <li>手机免费开店</li> <li>餐饮代理商招募</li> <li>商家申请开票</li> <li>免费合作美团排队</li> </ul> </a></li> <li><a href="">手机app</a></li> <li><a href="">我的美团 <ul> <li>我的订单</li> <li>我的收藏</li> <li>抵用券</li> <li>账户设置</li> </ul> </a></li> </ul> </nav> </div> <div class="clear"></div> </body> </html>
*{margin: 0;padding: 0}
.clear{clear: both;}
ul{list-style: none;}
a:link{text-decoration:none;color:#999;}
a:visited{color:#999;}
div{width: 100%;background-color: #F8F8F8;}
nav{width: 1200px;height: 40px;margin: 0 auto; }
.nav_left a{float: left;line-height: 40px;margin-left: 10px;font-size: 12px;}
.nav_right a{float: right;line-height: 40px;margin-right: 30px;font-size: 12px;position: relative;}
nav a:hover{color: #13D1BE;}
.nav_right a ul{display: none;line-height: 35px;}
.nav_right a:hover ul{display: block;color:#999;position: absolute;width: 140px;}
.nav_right a ul li:hover{color: #13D1BE;}二级菜单需要用到一个定位的只是和display的一个none属性，而且设置样式也比较繁琐，总的来说只要细心就能慢慢写出来