效果图展示：

代码展示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
.dh{width:960px; height:47px;position:relative;}
.dh1{width:949px; height:39px;float:left;background-color:#125AA2; padding:0 0 0 11px;position:relative; z-index:3;}
.dh2{width:118px; height:36px;float:left;padding:3px 0 0 0;position:relative; z-index:2;}
.dh20{width:88px; height:23px;float:left;padding-top:13px;padding-left:25px;text-align:left;font-weight:bold;font-size:14px; color:#fff;}
.dh20 a {color: #fff;}
.dh21{width:88px; height:23px;float:left; background-color:#F1F1F1; padding-top:13px;padding-left:25px;text-align:left;font-weight:bold;font-size:14px;color: #000;}
.dh21 a {color: #000;}
.dh22{width:90px; height:24px;float:left; background-color:#F1F1F1; margin:0px 0 0 0;position:absolute;left:-1px;padding-top:13px;padding-left:25px;text-align:left;font-weight:bold;font-size:14px; z-index:3;color: #125BA0;}
.dh21 a {color: #125BA0;}
.font{width:113px; height:36px;padding-top:13px;padding-left:25px;text-align:left;color: #fff;font-weight:bold;font-size:14px}
.font0{width:113px; height:36px;padding-top:13px;padding-left:25px;text-align:left;color: #000;font-weight:bold;font-size:14px}
.zbt{width:960px; height:30px;float:left; overflow:hidden; display:none;top:39px; left:0; position:absolute; z-index:1;}
.zbt0{width:10px; height:30px;float:left; background-color:#F1F1F1; }
.zbt1{width:10px; height:30px;float:left; background-color:#F1F1F1; }
.zbt2{width:940px; height:30px;float:left;padding:0 0 0 0px; background-color:#F1F1F1; }
.zbt3{width:auto; height:30px;float:left;padding-right:34px;font-weight:bold;line-height:30px;text-align:left;}
.zbt3 a{color:#CD0001}
.zbt4{width:88px; font-size:15px; height:30px;float:left;line-height:30px;text-align:center;}
.zbt4 a:hover{color:#3E5819;}
.zbt4 a:link,a:active,a:visited{ text-decoration:none;}
</style>
<script>
    function fav() { window.external.AddFavorite(location.href.substring(0, location.href.indexOf("/", 10))) }
    function GetOn(o, v) {
        for (var i = 1; i < v; i++) {
            if (document.getElementById("by" + i).value == "dh21")
            { document.getElementById("nav" + i).className = "dh21"; }
            else {
                document.getElementById("nav" + i).className = "dh20";
            }
            document.getElementById("zbt" + i).style.display = "none";
        }
        document.getElementById("nav" + o).className = "dh22";
        document.getElementById("zbt" + o).style.display = "block";
    }
    function GetOut(o) {
        if (document.getElementById("by" + o).value == "dh21")
        { document.getElementById("nav" + o).className = "dh21"; }
        else {
            document.getElementById("nav" + o).className = "dh20";
        }
        document.getElementById("zbt" + o).style.display = "none";
    }
    function getonSy() {
        document.getElementById("nav0").className = "dh21";
    }
    function getoutSy() {
        if (document.getElementById("by0").value == "dh21")
        { document.getElementById("nav0").className = "dh21"; }
        else {
            document.getElementById("nav0").className = "dh20";
        }
    }
</script>
</head>
<body>
    <div class="dh">
<div class="dh1">
<div class="dh2"><a href="/" id="nav0" class="dh20">公司首页</div></a></div>
<div class="dh2"><a href="#"><div id="nav1" class="dh20">公司介绍</div></a></div>
<div class="dh2"><a href="#"><div id="nav2" class="dh20">新闻中心</div></a></div>
<div class="dh2"><a href="#"><div id="nav3" class="dh20">相关政策</div></a></div>
<div class="dh2"><a href="#"><div id="nav4" class="dh20">服务中心</div></a></div>
<div class="dh2"><a href="#"><div id="nav5" class="dh20">企业发展</div></a></div>
<div class="dh2"><a href="#"><div id="nav6" class="dh20">党政建设</div></a></div>
<div class="dh2"><a href="#"><div id="nav7" class="dh20">企业文化</div></a></div>
</div>
<div class="zbt" id="zbt1" οnmοuseοut="GetOut(1);">
<div class="zbt0"></div>
<div class="zbt2">
<div class="zbt4"><a href="#">总经理致辞</a></div>
<div class="zbt4"><a href="#">发展历程</a></div>
<div class="zbt4"><a href="#">组织结构</a></div>
<div class="zbt4"><a href="#">公司荣誉</a></div>
</div>
<div class="zbt1"></div>
</div>
<div class="zbt" id="zbt2" οnmοuseοut="GetOut(2);">
<div class="zbt0"></div>
<div class="zbt2" style="width:790px; padding-left:150px;">
<div class="zbt4"><a href="#">公司新闻</a></div>
<div class="zbt4"><a href="#">行业新闻</a></div>
<div class="zbt4"><a href="#">通知公告</a></div>
</div>
<div class="zbt1"></div>
</div>
<div class="zbt" id="zbt3" οnmοuseοut="GetOut(3);">
<div class="zbt0"></div>
<div class="zbt2" style="width:710px; padding-left:230px;">
<div class="zbt4"><a href="#">国家政策</a></div>
<div class="zbt4"><a href="#">行业标准</a></div>
<div class="zbt4"><a href="#">地×××策</a></div>
<div class="zbt4"><a href="#">企业标准</a></div>
</div>
<div class="zbt1"></div>
</div>
<div class="zbt" id="zbt4" οnmοuseοut="GetOut(4);">
<div class="zbt0"></div>
<div class="zbt2" style="width:770px; padding-left:170px;">
<div class="zbt4"><a href="#">服务范围</a></div>
<div class="zbt4"><a href="#">服务承诺</a></div>
<div class="zbt4"><a href="#">服务流程</a></div>
<div class="zbt4"><a href="#">收费标准</a></div>
<div class="zbt4">网上交费</div>
<div class="zbt4"><a href="#">用热常识</a></div>
<div class="zbt4"><a href="#">用户须知</a></div>
<div class="zbt4"><a href="#">用户留言</a></div>
</div>
<div class="zbt1"></div>
</div>
<div class="zbt" id="zbt5" οnmοuseοut="GetOut(5);">
<div class="zbt0"></div>
<div class="zbt2" style="width:430px; padding-left:510px;">
<div class="zbt4"><a href="#">发展规划</a></div>
<div class="zbt4"><a href="#">发展纪实</a></div>
<div class="zbt4"><a href="#">发展回眸</a></div>
</div>
<div class="zbt1"></div>
</div>
<div class="zbt" id="zbt6" οnmοuseοut="GetOut(6);">
<div class="zbt0"></div>
<div class="zbt2" style="width:300px; padding-left:640px;">
<div class="zbt4"><a href="#">党团建设</a></div>
<div class="zbt4"><a href="#">纪检工作</a></div>
<div class="zbt4"><a href="#">创先争优</a></div>
</div>
<div class="zbt1"></div>
</div>
<div class="zbt"  id="zbt7" οnmοuseοut="GetOut(7);">
<div class="zbt0"></div>
<div class="zbt2" style="width:360px; padding-left:590px;">
<div class="zbt4"><a href="#">文化理念</a></div>
<div class="zbt4"><a href="#">热力风采</a></div>
<div class="zbt4"><a href="#">员工文苑</a></div>
<div class="zbt4"><a href="#">技术交流</a></div>
</div>
</div>
<input type="hidden" id="by0" /><input type="hidden" id="by1" /><input type="hidden" id="by2" /><input type="hidden" id="by3" /><input type="hidden" id="by4" /><input type="hidden" id="by5" /> <input type="hidden" id="by6" /><input type="hidden" id="by7" />
</div>
</body>
</html>