使用css+js构造的无限级菜单（寻梦的稻草人）

news/2024/7/7 20:01:03

先看看效果：

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>

使用css+js构造的无限级菜单（寻梦的稻草人）

相关文章

Rsync下行同步+inotify实时同步

rsync error: error starting client-server protocol (code 5) at main.c(1516) [sender=3.0.9]

[转]安装 mogilefs 测试系统，在一台机器上，用于测试环境

[转]Google Linux Cluster的系统结构分析(余一娇)

[转]Unix下针对邮件,搜索,网络硬盘等海量存储的分布式文件系统项目（关于GFS、MogileFS分布式文件系统邮件列表）

openstack与KVM的关系

[转] 面向方面的编程：它的好处是什么？

Openstack T版环境部署