通过html和css实现的效果如下：
1.样式分析：
可以将上面基本分为两部分进行书写，首先是版心的设置，版心就是你所写页面位于居中的位置；然后可以将上面分为左侧和右侧两个部分进行书写，左侧红色方框里面可以使用无序列表进行书写，让它们左浮动；右侧的内容让它们右浮动显示，然后里面的内容可以用两个盒子进行包裹，然后一个左浮动，一个右浮动显示；因为都具有跳转的效果，所以里面的内容都是使用a标签对文字进行包裹。
然后是下方的下拉框内容，因为该下拉是商铺写字楼的下拉列表，所以商铺写字楼是它的父亲，所以在定位时，可以给下拉列表绝对定位，可以给商铺写字楼相对定位，然后根据需要，调整下拉列表的位置；上面的小三角可以使用边跨三角的方法进行书写，三角的写法可以借鉴7月18号发布的三角制作的博客；然后是下拉列表的内容，可以在无序列表和自定义列表当中进行选择。
2.html代码块内容：
<div id="header"><div class="header-bx"><ul class="header-left"><li class="header-nav shouye"><a href="">首 页</a></li><li class="header-nav"><a href="">新 房</a><ul class="nav"><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></li><li class="header-nav"><a href="">二手房</a><ul class="nav"><li><a href="#">房源</a></li><li class="nav-hr"><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></li><li class="header-nav"><a href="">租 房</a><ul class="nav"><li><a href="#">区域找房</a></li><li class="nav-hr"><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></li><li class="header-nav"><a href="">商铺写字楼</a><ul class="nav nav-o"><li class="buto"><dl><dt><a href="#">商铺</a></dt><dd><a href="#">商铺出租</a></dd><dd><a href="#">商铺出售 </a></dd><dd><a href="#">商铺新盘</a></dd></dl></li><li class="buto"><dl><dt><a href="#">写字楼</a></dt><dd><a href="#">写字楼出租</a></dd><dd><a href="#">写字楼出售</a></dd><dd><a href="#">写字楼楼盘</a></dd><dd><a href="#">办公楼盘</a></dd></dl></li><li class="buto"><dl><dt><a href="#">厂房</a></dt><dd><a href="#">厂房出租</a></dd><dd><a href="#">厂房出售</a></dd><dd><a href="#">厂房转让</a></dd></dl></li><li class="buto"><dl><dt><a href="#">仓库</a></dt><dd><a href="#">仓库出租</a></dd><dd><a href="#">仓库出售</a></dd><dd><a href="#">仓库转让</a></dd></dl></li><li class="buto"><dl><dt><a href="#">土地</a></dt><dd><a href="#">土地出租</a></dd><dd><a href="#">土地出售</a></dd><dd><a href="#">土地转让</a></dd></dl></li><li class="buto"><dl><dt><a href="#">车位</a></dt><dd><a href="#">车位出租</a></dd><dd><a href="#">车位出售</a></dd><dd><a href="#">车位转让</a></dd></dl></li></ul></li><li class="header-nav"><a href="">海外地产</a></li><li class="header-nav"><a href="">装 修</a></li><li class="header-nav"><a href="">楼 讯</a></li><li class="header-nav"><a href="">房产研究院</a></li><li class="header-nav"><a href="">房 价</a></li><li class="header-nav"><a href="">问 答</a></li></ul><div class="header-right"><ul class="zc"><li><a href="#"><span class="iconfont icon-renyuan"></span> 登录</a></li><li><a href="">注册</a></li></ul><ul class="xz"><li><a href=""><span class="iconfont icon-shouji"></span> 下载APP</a><div class="xz-one"><img src="image/nav/1.png" alt="二维码"><div class="jieshi"><span>下载安居客APP</span><p>随时随地查看新上房源</p></div></div></li></ul></div></div></div>
3.css样式表部分：
注意：1.因为之前引入了css样式重置表，所以就没有清除样式的步骤。
2.里面的伪类选择器，例如nth-of-type是因为使用的是单类名进行书写的，可以通过设置多个类名，这样调用类名和书写css样式的时候，都可以大大简化；而且也可以减少对伪类选择器进行选择时，所需要主义的事项。
#header {width: 100%;height: 50px;background-color: #63AB05;}.header-bx {width: 1180px;margin: 0px auto;}/* 头部左侧开始 */.header-left {width: 920px;float: left;}.header-nav {position: relative;float: left;}/* 三角 */.header-nav:not(.header-nav:first-child)::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin-top: 15px;width: 0;height: 0;border: 10px solid transparent;border-bottom: 10px solid #fff;display: none;}/* hover选中伪元素选择器时,直接在hover后面加上::after就可以选择选中 *//* .header-nav:nth-of-type(2):hover::after,.header-nav:nth-of-type(3):hover::after,.header-nav:nth-of-type(4):hover::after,.header-nav:nth-of-type(5):hover::after{display: block;} */.header-nav:not(.header-nav:nth-of-type(n+6)):hover::after {display: block;}/* 三角结束 */.header-nav:hover {background-color: #528e01;}.header-nav>a {line-height: 50px;font-size: 18px;font-weight: 400;color: #fff;padding: 0px 13px;}.shouye {background-color: #528e01;}/* 下拉菜单设置 */.header-nav>.nav {border: 1px solid #999;border-top: none;position: absolute;padding: 5px 5px;display: none;background: #F9F9F9;/* 优先级提高,优先显示在页面的上方 */z-index: 1;}.header-nav:hover>.nav {display: block;}.nav-hr {margin-bottom: 5px;border-bottom: 1px solid black;}.header-nav>.nav>li>a {white-space: nowrap;margin-top: 15px;padding: 0 15px 0 10px;font-size: 16px;line-height: 35px;}/* 商铺写字楼部分 */.nav-o {width: 600px;}.nav>.buto {width: 100px;float: left;}.nav>.buto>dl {float: left;padding-left: 10px;padding-right: 10px;}.nav>.buto>dl>dt,.nav>.buto>dl>dd {padding: 10px 0;}.nav>.buto>dl>dd {font-size: 14px;}.header-nav>.nav>li>a:hover {color: #528E04;}/* 商铺写字楼结束 *//* 左侧结束 *//* 头部右侧部分 */.header-right {width: 249px;height: 50px;line-height: 50px;float: right;}.zc {float: left;color: #fff;text-decoration: none;padding: 0px 5px;}.zc>li {float: left;height: 30px;padding-right: 10px;position: relative;}.zc>li>a {float: left;color: #DCE8CC;line-height: 30px;text-align: center;border-radius: 2px;margin-top: 10px;}.xz {float: right;}.xz>li>a {padding: 5px;background-color: #dce8cc;}.xz>li>a>span {color: #62ab02;}.xz>li {position: relative;}.xz>li:hover>.xz-one {display: block;}/* 头部右侧下拉列表部分 */.xz-one {width: 410px;height: 200px;margin-top: 20px;left: -100px;background-color: #ffffff;position: absolute;display: none;}.xz-one>img {float: left;width: 160px;margin: 20px;}.jieshi {float: left;margin-top: 50px;margin-left: 10px;}.jieshi>span {font-size: 20px;text-align: center;}.jieshi>p {width: 160px;line-height: 20px;font-size: 20px;color: #979b9e;}
代码书写还存在一些问题，以上代码仅供参考，感谢您的观看。
4.具体的显示效果为：
安居客头部导航效果
