.header{background:url(../img/menu.jpg) center top no-repeat;height:89px;}

.nav{width:928px;margin:0 auto;padding:34px 0 27px 40px;}

.menu{float:left;}

.menu li{float:left;position:relative;z-index:10;height:27px;font:bold 14px/27px "宋体";cursor:pointer;margin-right:3px;}

.menu #mr{margin-right:156px;}

.menu .on,.menu li p a:hover{background-color:#3d7c4a;}

.menu li p a:hover,.menu li dl dd a:hover{text-decoration:none;}

.menu li p a{display:block;padding:0 5px;text-decoration:none;color:#fdfefd;}

.menu li span{position:absolute;top:27px;left:0;background:url(../img/span_bg.png) 0 bottom no-repeat;padding-bottom:3px;overflow:hidden;display:none;}

.menu li span a{display:block;font-weight:normal;font-size:12px;height:21px;margin-top:-1px;background-color:#79af83;line-height:21px;text-align:center;border-top:1px solid #97bd9e;color:#fff;}

.menu li span a:hover{background-color:#42824e;text-decoration:none;}

.menu li .show{display:block;}

.menu li .span-bg1{background:url(../img/span_bg1.png) 0 bottom no-repeat;}

.menu li .span-bg2{background:url(../img/span_bg2.png) 0 bottom no-repeat;}

var menuList=function(){};

		function getClass(oClass){

			var oEle=document.getElementsByTagName("*");

			var arr=[];

			for (var i=0;i<oEle.length ;i++ )

			{

				if (oEle[i].className == oClass)

				{

					arr.push(oEle[i]);

				}

			}

			return arr;

		}

		menuList.prototype={

			init:function(){

				var t=this;

				this.aLi = getClass("mest");

				this.aSpan = document.getElementById("menu").getElementsByTagName("span");

				this.iNow=0;

				for (var i=0;i<t.aLi.length ;i++ )

				{

					t.aLi[i].index = i;

					t.aLi[i].onmouseover=function()

					{

						t.iNow=this.index;

						for (var i=0;i<t.aLi.length ;i++ )

						{

							t.aLi[i].className = "";

							t.aSpan[i].className="";

						}

						this.className = "mest on";

						t.aSpan[t.iNow].className="show";

						if (t.aLi[t.iNow].getElementsByTagName("a")[0].innerHTML.length == 5)

						{

							t.aSpan[t.iNow].className="show span-bg1";

						}

						else if (t.aLi[t.iNow].getElementsByTagName("a")[0].innerHTML.length == 6)

						{

							t.aSpan[t.iNow].className="show span-bg2";

						}

					}

					t.aLi[i].onmouseout=function(){

						this.className = "mest";

						t.aSpan[t.iNow].className="";

					}

					t.aSpan[i].style.width = t.aLi[i].offsetWidth + "px";

					

					

				}		 }

	}

	new menuList().init();

<div class="header">

	<div class="nav clr">

		<ul class="menu" id="menu">

			<li>

				<p><a href="#" title="">首页</a></p>

			</li>

			<li class="mest">

				<p><a href="#" title="">走进益鑫泰</a></p><!--只要是有下拉菜单的在li都要有class名为mest-->

				<span >

					<a href="#" title="">服务简介</a>

					<a href="#" title="">投诉与建议