效果
代码中的图片可以自己换的
下拉菜单HTML代码
<header class="header"><div class="header_left"><img src="img/logo.jpg"></div><div class="header_right"><div class="number_right"><img src="img/number.jpg"></div><ul><a href="#"><li>首页</li></a><a href="#"><li class="show_list"><span>成功案例</span><ul class="move_list"><li>品牌设计</li><li>网页设计</li><li>平面设计</li><li>电子商城</li><li>空间/建筑</li></ul></li></a><a href="#"><li>我要设计</li></a><a href="#"><li>在线咨询</li></a><a href="#"><li>会员注册</li></a><a href="#"><li>会员登录</li></a></ul></div></header>
下拉菜单CSS代码
.header{height: 120px;width: 1046px;margin: 0 auto;}.header_left{float: left;line-height: 120px;}.header_left img{width: 300px;height: 100px;}.header_right{float: right;height: 120px;position: relative;}.header_right>div{position: absolute;top: 0;right: 0;}.header_right ul{margin-top: 88px;}.header_right ul a li{border-right: 1px solid #000000;height: 13px;font-size: 15px;padding: 0 25px;font-weight: bold;color: #666;}.header_right ul a{float: left;line-height: 13px;}.header_right ul a li:hover{color: #000000;}.header_right ul a:last-child li{/*去掉最后的边框*/border: none;}.show_list{position: relative;}.show_list .move_list{display: none;z-index: 103;position: absolute;top: -56px;left: 0;width: 100%;background: #333;text-align: center;}.show_list .move_list li{padding: 10px 0;width: 114px;color: #fff;}.header_right ul a .show_list{padding-bottom: 20px;border-right: none;}.show_list:hover .move_list{display: block;}.header_right ul a:nth-child(3){border-left: 1px solid #000;}.show_list .move_list li:hover{color: white;background: orange;}
在写完上述代码的同时须加上css的重置代码，代码如下：
* {margin: 0;padding: 0}em,i {font-style: normal}li {list-style: none}a{font: 14px/24px Microsoft YaHei,Arial,\\5B8B\4F53,Arial Narrow;letter-spacing: 1.2px;color: #666;text-decoration: none}a:hover {color: #c81623 ;}img {border: 0;vertical-align: middle}input{outline: none;}button {cursor: pointer;border:none;outline: none;}
