使用css+js构造的无限级菜单（寻梦的稻草人）_前端横向多级菜单无限延伸-优快云博客

本文链接：https://blog.youkuaiyun.com/hejishan/article/details/2249725

先看看效果：

css menu

html代码：

<html>
<head>
<style>
ul#menu, ul#menu ul{
    list-style:none;
    margin:0;
    border-bottom:1px solid #DDD;
    border-right:1px solid #DDD;
    border-left:1px solid #DDD;
    width:150px;
    padding:0;
    font-size:14px;
}
ul#menu li{
    border-top:1px solid #DDD;
    position:relative;
    padding:4px;

}
ul#menu li ul{
    position:absolute;
    left:150px;
    _left:144px;
    top:0;
    display:none;
}
ul#menu li.over{
    background:#EEE;
}
ul#menu li.out{
    background:#fff;
}
ul#menu a{
    display:block;
    text-decoration:none;
    color:#000;
    _height:0;
}
</style>
<script type="text/javascript">
function initMenu(event,ul){
    if(!ul) ul = document.getElementById("menu");
    li = ul.getElementsByTagName("li");
    for(i=0;i<li.length;i++)
    {
        li[i].onmouseover = function(){
            try{
                this.className='over';
                this.getElementsByTagName("ul")[0].style.display="block";
            }catch(e){};
        }
        li[i].onmouseout = function(){
            try{
                this.className='out';
                this.getElementsByTagName("ul")[0].style.display="none";
            }catch(e){};
        }
    }
}
window.onload = initMenu;
</script>
</head>
<body>
<ul id="menu">
    <li>
        这是菜单1
        <ul>
            <li>
                这是菜单1
                <ul>
                    <li><a href="#">这是子菜单</a></li>
                    <li>
                        这是菜单1
                        <ul>
                            <li><a href="#">这是子菜单</a></li>
                            <li><a href="#">这是子菜单</a></li>
                            <li>
                                这是菜单1
                                <ul>
                                    <li><a href="#">这是子菜单</a></li>
                                    <li>
                                        这是菜单1
                                        <ul>
                                            <li><a href="#">这是子菜单</a></li>
                                            <li><a href="#">这是子菜单</a></li>
                                            <li><a href="#">这是子菜单</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">这是子菜单</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">这是子菜单</a></li>
                </ul>
            </li>
            <li>
                这是菜单1
                <ul>
                    <li><a href="#">这是子菜单</a></li>
                    <li><a href="#">这是子菜单</a></li>
                    <li><a href="#">这是子菜单</a></li>
                </ul>
            </li>
            <li><a href="#">这是子菜单</a></li>
        </ul>
    </li>
    <li>
        这是菜单2
        <ul>
            <li><a href="#">这是子菜单</a></li>
            <li><a href="#">这是子菜单</a></li>
            <li><a href="#">这是子菜单</a></li>
        </ul>
    </li>
    <li>
        这是菜单3
        <ul>
            <li><a href="#">这是子菜单</a></li>
            <li><a href="#">这是子菜单</a></li>
            <li><a href="#">这是子菜单</a></li>
        </ul>
    </li>
</ul>
</body>
</html>