顶部导航

来源：互联网发布：大数据项目视频编辑：程序博客网时间：2024/04/28 09:54

前台：

<head>

        function mout(object) {
            //主菜单样式
            var mm = document.getElementById("m_" + object);
            mm.className = "m_li";

            //子菜单隐藏
            var ss = document.getElementById("s_" + object);
            ss.style.display = "none";

}

</script>

</head>

<div style="width: 866px; height: 66px;">
                    <div id="menu">
                        <ul>
                            <li id="m_1" class='m_li' onmouseover='mover(1);' onmouseout='mout(1);'><a href="gongsijieshao.aspx">
                                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></a></li>
                            <li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="zixundongtai.aspx">
                                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></a></li>
                            <li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="chanpinzhongxin.aspx">
                                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></a></li>
                            <li id="m_4" class='m_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="yanjiukaifa.aspx">
                                <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label></a></li>
                            <li id="m_5" class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="kehufuwu.aspx">
                                <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label></a></li>
                            <li id="m_6" class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="renliziyuan.aspx">
                                <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label></a></li>
                            <li id="m_7" class='m_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="touzizheguanxi.aspx">
                                <asp:Label ID="Label7" runat="server" Text="Label"></asp:Label></a></li>
                        </ul>
                    </div>
                    <div style="height: 32px; background-color: white;">
                        <ul class="smenu">
                            <li style="padding-left: 129px;" id="s_1" class='s_li' onmouseover='mover(1);' onmouseout='mout(1);'>
                                <a href="gongsijieshao.aspx?id=1" target="_parent">公司简介</a> | <a href="gongsijieshao.aspx?id=2"
                                    target="_parent">企业文化</a> | <a href="gongsijieshao.aspx?id=3" target="_parent">发展大事记</a>
                                | <a href="gongsijieshao.aspx?id=4" target="_parent">业界荣誉</a> | <a href="gongsijieshao.aspx?id=5"
                                    target="_parent">公益事业</a> </li>
                            <li style="padding-left: 181px;" id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'>
                                <a href="zixundongtai.aspx?id=1" target="_parent">公司新闻</a> | <a href="zixundongtai.aspx?id=2"
                                    target="_parent">媒体聚焦</a> | <a href="zixundongtai.aspx?id=3" target="_parent">视频中心</a>
                            </li>
                            <li style="padding-left: 302px;" id="s_3" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'>
                                <a href="shangyechanpin.aspx?id=0" target="_parent">商业产品</a> | <a href="xiaofeichanpin.aspx?id=0"
                                    target="_parent">消费产品</a></li>
                            <li style="padding-left: 342px;" id="s_4" class='s_li' onmouseover='mover(4);' onmouseout='mout(4);'>
                                <a href="yanjiukaifa.aspx?id=1" target="_parent">概述</a> | <a href="yanjiukaifa.aspx?id=2"
                                    target="_parent">R&D人力和组织</a> | <a href="yanjiukaifa.aspx?id=3" target="_parent">全球R&D网络</a>
                                | <a href="yanjiukaifa.aspx?id=4" target="_parent">全球技术联盟</a> </li>
                            <li style="padding-left: 474px;" id="s_5" class='s_li' onmouseover='mover(5);' onmouseout='mout(5);'>
                                <a href="kehufuwu.aspx?id=1" target="_parent">服务支持</a> | <a href="kehufuwu.aspx?id=2"
                                    target="_parent">服务流程</a> | <a href="kehufuwu.aspx?id=3" target="_parent">服务政策</a>
                            </li>
                            <li style="padding-left: 507px;" id="s_6" class='s_li' onmouseover='mover(6);' onmouseout='mout(6);'>
                                <a href="renliziyuan.aspx?id=1" target="_parent">人才理念 </a>| <a href="renliziyuan.aspx?id=2"
                                    target="_parent">人才招聘</a> | <a href="renliziyuan.aspx?id=3" target="_parent">培养体系</a>
                                | <a href="renliziyuan.aspx?id=4" target="_parent">员工风采</a> </li>
                            <li style="padding-left: 430px;" id="s_7" class='s_li' onmouseover='mover(7);' onmouseout='mout(7);'>
                                <a href="touzizheguanxi.aspx?id=1" target="_parent">股本结构 </a>| <a href="touzizheguanxi.aspx?id=2"
                                    target="_parent">财务数据</a> | <a href="touzizheguanxi.aspx?id=3" target="_parent">分红方案</a>
                                | <a href="touzizheguanxi.aspx?id=4" target="_parent">十大股东</a> | <a href="touzizheguanxi.aspx?id=5"
                                    target="_parent">定期报告</a> | <a href="touzizheguanxi.aspx?id=6" target="_parent">临时公告</a>
                            </li>
                        </ul>
                    </div>
                </div>

menu.css页面：

body,td,th {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #333333;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#F3F3F3;
}
td{ font-family:黑体;font-size:14px;color:#A9A9A9;}
a {
color: #333333;
text-decoration: none;
}
a:hover {

text-decoration: none;
}
a:active{
color:#5AB7C1;
text-decoration: none;
}
#menu{
height:32px;
float:right;
width:865px;
background-image:url("../images/内容页导航.jpg");
text-align:right;
}
#menu ul{
width:700px; height:32px; float:right;
list-style-type:none; padding:0px; margin-top:0px; margin-bottom:0px;
}
.m_li{
float:left; width:100px; line-height:32px; text-align:center;
}
.m_li a{
display:block; color:#FFFFFF; width:100px;
}

.m_li_a{
float:left; width:100px;height:32px; line-height:32px; text-align:center;
font-weight:bold; position:relative;
background-image:url("../images/btnbg.gif");

}

.smenu{
width:804px; margin:0px auto 0px auto; padding:0px; list-style-type:none; height:32px; float:right;text-align:left;
}
.smenu a
{
    text-decoration:none;
    color:#3595E1;
}
.smenu a:link
{
    text-decoration:none;
    color:#3595E1;
}
.smenu a:hover
{
    text-decoration:none;
    color:#3595E1;
    font-weight:bold;
}
.smenu a:visited
{
    text-decoration:none;
    color:#3595E1;
}
.s_li{
line-height:32px; width:auto; display:none; height:32px;
}
#footer_sites1
{
    color:#666666;
    width:130px;
}
#footer_sites2
{
    color:#666666;
    width:130px;
}