横向二级下拉菜单

来源：互联网发布：斗鱼tv mac客户端编辑：程序博客网时间：2024/04/30 02:15
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>横向二级下拉菜单</title>    <style>        *{            margin:0;            padding:0;        }        body {            font-size:15px;        }        a {            display: block;            color:#666;            width: 80px;            text-align:center;            text-decoration:none;        }        a:hover  {            color:#FFF;            background:#C00;        }        /*主菜单列表样式*/        #nav{            line-height: 24px;/*文字的行高*/            list-style: none;/*隐藏默认的列表符号*/            background: #666;            margin-left: 100px;        }        /*一级菜单列表样式*/        #nav li{            float: left;/*列表项向左浮动*/            width: 80px;            background: #ccc;        }        /*二级菜单列表样式*/        #nav li ul{            line-height: 24px;            position: absolute;            left: -1000px;/*将left坐标设置为负值，起到隐藏二级菜单项的作用*/            list-style: none;            text-align:left;            width: 180px;        }        /*二级菜单项样式*/        #nav li ul li{            background: #F6F6F6;        }        /*二级菜单项中的超链接*/        #nav li ul a{            width: 180px;            text-align: left;            padding-left: 20px;        }        /*鼠标移动到一级菜单后应用的样式*/        #nav li.mouseover ul {            left: auto;/*取消left属性默认的-1000px的设置，显示二级菜单项*/        }        h1{            margin-left: 200px;        }        ol{            clear:both;          /*取消浮动*/            margin-left: 115px;            margin-top:150px;        }    </style>    <script type="text/javascript" language="JavaScript">        function makeMenu(){            var items=document.getElementById("nav").getElementsByTagName("li");            for(var i=0;i<items.length;i++){                items[i].onmouseover=function(){                    this.className="mouseover";                }                items[i].onmouseout=function(){                    this.className="";                }            }        }    </script></head><body onload="makeMenu()">    <h1>横向二级下拉菜单</h1>    <ul id="nav">        <li><a href="菜单页面地址" >菜单项A</a>            <ul>                <li><a href="菜单页面地址">菜单项A1 </a></li>                <li><a href="菜单页面地址">菜单项A2 </a></li>                <li><a href="菜单页面地址">菜单项A3 </a></li>                <li><a href="菜单页面地址">菜单项A4 </a></li>            </ul>        </li>        <li><a href="菜单页面地址" >菜单项B</a>            <ul>                <li><a href="菜单页面地址">菜单项B1 </a></li>                <li><a href="菜单页面地址">菜单项B2 </a></li>                <li><a href="菜单页面地址">菜单项B3 </a></li>                <li><a href="菜单页面地址">菜单项B4 </a></li>            </ul>        </li>        <li><a href="菜单页面地址" >菜单项C</a>            <ul>                <li><a href="菜单页面地址">菜单项C1 </a></li>                <li><a href="菜单页面地址">菜单项C2 </a></li>                <li><a href="菜单页面地址">菜单项C3 </a></li>                <li><a href="菜单页面地址">菜单项C4 </a></li>            </ul>        </li>        <li><a href="菜单页面地址" >菜单项A</a>            <ul>                <li><a href="菜单页面地址">菜单项A1 </a></li>                <li><a href="菜单页面地址">菜单项A2 </a></li>            </ul>        </li>    </ul>    <ol>        <li>本菜单采用无序列表设计，可以支持二级横向下拉菜单。</li>        <li>初始状态下，二级菜单通过将水平坐标设置为负值，进行隐藏</li>        <li>当鼠标移动到对应的一级菜单上后，恢复二级菜单的水平坐标，显示菜单项。</li>    </ol></body></html>
0 0