二级横向蓝色+白色背景两级菜单条 - 代码效果

≡

<!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">
<TITLE>蓝色二级横向滑动导航菜单</TITLE>
<style type=text/css>
UL {
	LIST-STYLE-TYPE: none;
	padding:0px;
	margin:0px;
}
LI {
	FONT-SIZE: 12px;
	COLOR: #333;
	LINE-HEIGHT: 1.5em;
	FONT-FAMILY: "微软雅黑", Arial, Verdana;
}
.hide {
	DISPLAY: none
}
#mainmenu_top UL LI .menuhover {
	BACKGROUND: url(daima/tp/daoh/mainmenu_s.gif) no-repeat;
	COLOR: #fff;
}
#mainmenu_top UL LI A {
	MARGIN-TOP: 2px;
	CURSOR: pointer;
	PADDING-TOP: 8px;
	HEIGHT: 20px;
	text-decoration: none;
}
#mainmenu_top {
	width:100%;
	HEIGHT: 28px;
	display:block;
	overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
 	WIDTH: 81px;
	height:auto;
	DISPLAY: block;
	COLOR: #666666;
	TEXT-ALIGN: center;
	BACKGROUND: url(daima/tp/daoh/mainmenu_h.gif) no-repeat;
}
#mainmenu_bottom {
	width:100%;
	height:32px;
	line-height:32px;
	display:block;
	overflow:hidden;
	BACKGROUND: url(daima/tp/daoh/mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
	HEIGHT: 32px;
	COLOR: #fff;
	MARGIN-LEFT: 0px;
	PADDING: 0px 0px 0px 5px;
	BACKGROUND: url(daima/tp/daoh/mainmenu_r.gif) no-repeat right 50%;
}
#mainmenu_bottom UL {}
#mainmenu_bottom UL LI {
	PADDING-LEFT: 8px;
	FLOAT: left;
	MARGIN-LEFT: 7px;
	HEIGHT: 32px;
}
#mainmenu_bottom UL LI.se {
	FLOAT: left;
	MARGIN-LEFT: 7px;
	HEIGHT: 32px;
	PADDING-LEFT: 8px;
	BACKGROUND: url(daima/tp/daoh/menulink_bg_l.gif) no-repeat;
}
#mainmenu_bottom UL LI A {
	COLOR: #fff;
	LINE-HEIGHT: 32px;
	PADDING-RIGHT: 18px;
	DISPLAY: block;
	text-decoration: none;
	BACKGROUND: url(daima/tp/daoh/menulink_bg_normal.gif) no-repeat right 50%;
}
#mainmenu_bottom UL LI A:hover {
	BACKGROUND: url(daima/tp/daoh/menulink_bg_normal.gif) no-repeat right 50%;
	color: #FFCC00;
}
#mainmenu_bottom UL LI A.se {
	COLOR: #fff;
	LINE-HEIGHT: 32px;
	PADDING-RIGHT: 18px;
	DISPLAY: block;
	BACKGROUND: url(daima/tp/daoh/menulink_bg_r.gif) no-repeat right 50%;
}
</style>
<SCRIPT type=text/javascript>
var waitting = 1;
var secondLeft = waitting;
var timer;
var sourceObj;
var number;
function getObject(objectId)//获取id的函数
    {
        if(document.getElementById && document.getElementById(objectId)) {
        // W3C DOM
        return document.getElementById(objectId);
        } else if (document.all && document.all(objectId)) {
        // MSIE 4 DOM
        return document.all(objectId);
        } else if (document.layers && document.layers[objectId]) {
        // NN 4 DOM.. note: this won't find nested layers
        return document.layers[objectId];
        } else {
        return false;
        }
    }
function SetTimer()//主导航时间延迟的函数
    {
        for(j=1; j <10; j++){
            if (j == number){
                if(getObject("mm"+j)!=false){
                    getObject("mm"+ number).className = "menuhover";
                    getObject("mb"+ number).className = "";
                }
            }
            else{
                 if(getObject("mm"+j)!=false){
                    getObject("mm"+ j).className = "";
                    getObject("mb"+ j).className = "hide";
                }
            }
        }
    }
function CheckTime()//设置时间延迟后
    {
        secondLeft--;
        if ( secondLeft == 0 )
        {
        clearInterval(timer);
        SetTimer();
        }
    }
function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟
    {
        number = Num;
        sourceObj = thisobj;
        secondLeft = 1;
        timer = setTimeout('CheckTime()',100);
    }
function OnMouseLeft()//主导航鼠标移出函数,清除时间函数
    {
        clearInterval(timer);
    }    
function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );
thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
thisUPage_s= thisUPage_s.toLowerCase();//小写
	if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
	{
		getObject("mm1").className="menuhover"
		getObject("mb1").className = "";
	}
	else if(thisUPage_s=="domain")
	{
		getObject("mm2").className="menuhover"
		getObject("mb2").className = "";
	}
	else if(thisUPage_s=="hosting")
	{
		getObject("mm3").className="menuhover"
		getObject("mb3").className = "";
	}
	else if(thisUPage_s=="mail")
	{
		getObject("mm4").className="menuhover"
		getObject("mb4").className = "";
	}
	else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
		getObject("mm5").className="menuhover"
		getObject("mb5").className = "";
	}
	else if(thisUPage_s=="promotion"){
		getObject("mm6").className="menuhover"
		getObject("mb6").className = "";
	}
	else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
		getObject("mm7").className="menuhover"
		getObject("mb7").className = "";
	}
	else if(thisUPage_s=="benefit"){
		getObject("mm8").className="menuhover"
		getObject("mb8").className = "";
	}
	else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
		getObject("mm9").className="menuhover"
		getObject("mb9").className = "";
	}
	else
	{
		getObject("mm1").className="";
		getObject("mb1").className = "";
	}
}
window.load=mmenuURL()
</SCRIPT>

<DIV id=mainmenu_body>

    <DIV id=mainmenu_top>
        <UL>
        <LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="/" target=_parent>网站首页</A> </LI>
        <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="/" target=_parent>JS代码</A> </LI>
        <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="/" target=_parent>电子商务</A> </LI>
        <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="/" target=_parent>源码下载</A> </LI>
        <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="/" target=_parent>建站技巧</A> </LI>
        <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="/" target=_parent>CSS技巧</A> </LI>
        <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="/" target=_parent>CSS导航菜单</A> </LI>
        <LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="/" target=_parent>菜单特效</A> </LI>
        <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="/" target=_parent>SEO优化</A> </LI></UL>
    </DIV>

    <DIV id=mainmenu_bottom>
        <DIV class=mainmenu_rbg>
            <UL class=hide id=mb1>
            <LI><A href="/">源码下载-中小企业菜单特效专家</A> </LI>
            <LI><A href="/">网站公告：源码下载欢迎您~</A> </LI>
		</UL>
            <UL class=hide id=mb2>
            <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
            <UL class=hide id=mb3>
            <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
            <LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI>
            <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
            <UL class=hide id=mb4>
            <LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>源码下载</A> </LI>
            <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>网页特效</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
            <UL class=hide id=mb5>
            <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
            <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服务器租用</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI>
            <LI><A href="#" target=_parent>超级机房</A> </LI>
            <LI><A href="#" target=_parent>源码下载</A> </LI></UL>
            <UL class=hide id=mb6>
            <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
            <LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>源码下载</A> </LI></UL>
            <UL class=hide id=mb7>
            <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
            <LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>个人建站</A> </LI>
            <LI><A href="#" target=_parent>门户建站</A> </LI></UL>
            <UL class=hide id=mb8 style="DISPLAY: none">
            <LI style="MARGIN-LEFT: 270px"><A href="/agent/" target=_parent>源码下载</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
            <UL class=hide id=mb9>
            <LI style="MARGIN-LEFT: 180px"><A href="/agent/">源码下载</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI>
            <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
        </DIV>
    </DIV>
</DIV>
</body></html>

提示：输入修改代码都可运行！