二级菜单

来源：互联网发布：网络间接市场调研方法编辑：程序博客网时间：2024/04/24 08:55
<!DOCTYPE html><html><head>    <title>二级菜单</title>    <meta charset="UTF-8">    <style type="text/css">        body{            background-color: orange;        }        #menu {            width:350px;            margin:auto;        }        #div1 {            /*outline: 1px solid red;*/            display:none;            font-size:12px;            position:relative;            left:-8px;            top:0px;            background-color:White;            padding:5px 10px 0px 10px;            width:45px;        }        #div2 {            /*outline: 1px solid red;*/            display:none;            font-size:12px;            position:relative;            left:63px;            top:0px;            background-color:White;            padding:5px 10px 0px 10px;            width:45px;        }        #div3 {            /*outline: 1px solid red;*/            display:none;            font-size:12px;            position:relative;            left:133px;            top:0px;            background-color:White;            padding:5px 10px 0px 10px;            width:45px;        }        #div4 {            /*outline: 1px solid red;*/            display:none;            font-size:12px;            position:relative;            left:204px;            top:0px;            background-color:White;            padding:5px 10px 0px 10px;            width:45px;        }        #div5 {            /*outline: 1px solid red;*/            display:none;            font-size:12px;            position:relative;            left:275px;            top:0px;            background-color:White;            padding:5px 10px 0px 10px;            width:45px;        }        div>a{            text-decoration: none;           color: palevioletred;        }    </style>    <script type="text/javascript">        //显示层        function showDiv(divName) {            document.getElementById(divName).style.display = "block";        }        //隐藏层        function hiddenDiv(divName) {            document.getElementById(divName).style.display = "none";        }    </script></head><body><div id="menu">    <a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">第一组</a>&nbsp;&nbsp;|&nbsp;    <a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">第二组</a>&nbsp;&nbsp;|&nbsp;    <a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">第三组</a>&nbsp;&nbsp;|&nbsp;    <a href="#" onmouseover="showDiv('div4')" onmouseout="hiddenDiv('div4')">第四组</a>&nbsp;&nbsp;|&nbsp;    <a href="#" onmouseover="showDiv('div5')" onmouseout="hiddenDiv('div5')">第五组</a>    <div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">        <a href="#">毛毛</a><br/><br/>        <a href="#">姚姚</a><br/><br/>        <a href="#">文伟</a><br/><br/>        <a href="#">超哥</a><br/><br/>        <a href="#">逸凡</a><br/><br/>        <a href="#">还有我</a>    </div>    <div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">        <a href="#">慧慧</a><br/>        <a href="#">李建</a><br/>        <a href="#">郑彪</a><br/>        <a href="#">静静</a><br/>        <a href="#">孙倩</a><br/>        <a href="#">还有谁</a>    </div>    <div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">        <a href="#">李豪</a><br/>        <a href="#">超超</a><br/>        <a href="#">邓伟</a><br/>        <a href="#">付义</a><br/>        <a href="#">曾杰</a><br/>        <a href="#">文凡</a>    </div>    <div id="div4" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">        <a href="#">刘茜</a><br/>        <a href="#">蒋雪</a><br/>        <a href="#">杨琳萍</a><br/>        <a href="#">何程程</a><br/>        <a href="#">忘了~</a>    </div>    <div id="div5" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">        <a href="#">邵强</a><br/>        <a href="#">陈寅</a><br/>        <a href="#">尹瑞</a><br/>        <a href="#">瑞琪</a><br/>        <a href="#">刘星~</a><br/>        <a href="#">杨林川</a>    </div></div></body></html>
0 0