当前位置： 移动技术网 > IT编程>网页制作>CSS > 向右方向的二级菜单

向右方向的二级菜单

2018年04月25日  | 移动技术网IT编程  | 我要评论 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>制作二级菜单</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-family: Verdana,Arial,Helvetica,sans-serif;
            font-size: 12px;
            line-height: 1.5;
        }

        #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
            border: 1px solid #ccc;
            width: 100px;
        }

            #menu ul li {
                background-color: #eee;
                height: 26px;
                line-height: 26px;
                border-bottom: 1px solid #ccc;
            }

                #menu ul li a {
                    color: #000;
                    text-decoration: none;
                }

                    #menu ul li a:hover {
                        color: #ff0000;
                    }

                #menu ul li ul {
                    display: none;
                    position: absolute;
                    left: 100px;
                    top: 0px;
                }

                #menu ul li.current ul {
                    display: block;
                }
    </style>
    <script type="text/javascript">
        startList = function () {
            navRoot = document.getElementById("menu");
            var allli = navRoot.getElementsByTagName("li");
            for (i = 0; i < allli.length; i++) {
                node = allli[i];
                node.onmouseover = function () {
                    this.className += "current";
                }
                node.onmouseout = function () {
                    this.className = this.className.replace("current", "");
                }
            }
        }
        window.onload = startList;
    </script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">PS</a>
                <ul>
                    <li class="current"><a href="#">二级菜单列表1</a></li>
                    <li class="current"><a href="#">二级菜单列表2</a></li>
                </ul>
            </li>
            <li><a href="#">Jave</a>
                <ul>
                    <li class="current"><a href="#">二级菜单列表5</a></li>
                    <li class="current"><a href="#">二级菜单列表6</a></li>
                    <li class="current"><a href="#">二级菜单列表7</a></li>
                    <li class="current"><a href="#">二级菜单列表8</a></li>
                    <li class="current"><a href="#">二级菜单列表8</a></li>
                </ul>
            </li>
            <li><a href="#">php</a>
                <ul>
                    <li class="current"><a href="#">二级菜单列表9</a></li>
                    <li class="current"><a href="#">二级菜单列表10</a></li>
                    <li class="current"><a href="#">二级菜单列表11</a></li>
                    <li class="current"><a href="#">二级菜单列表12</a></li>
                </ul>
            </li>
            <li><a href="#">.net</a>
                <ul>
                    <li class="current"><a href="#">二级菜单列表13</a></li>
                    <li class="current"><a href="#">二级菜单列表14</a></li>
                    <li class="current"><a href="#">二级菜单列表15</a></li>
                    <li class="current"><a href="#">二级菜单列表16</a></li>
                    <li class="current"><a href="#">二级菜单列表15</a></li>
                    <li class="current"><a href="#">二级菜单列表16</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网