HTML+CSS实现导航条下拉菜单的示例代码

<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>

.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;}

* {    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;}