横向二级下拉菜单

最新推荐文章于 2024-06-18 14:37:18 发布

傲骄鹿先生

最新推荐文章于 2024-06-18 14:37:18 发布

阅读量2.5k

点赞数 1

文章标签： JavaScript

本文链接：https://blog.csdn.net/cyl101816/article/details/56672751

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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].οnmοuseοver=function(){
                    this.className="mouseover";
                }
                items[i].οnmοuseοut=function(){
                    this.className="";
                }
            }
        }
    </script>
</head>

<body οnlοad="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>