实现原理 用ul和li 来展示多级菜单，当ul上有鼠标时，就展开该ul下的所有li标签， 当ul(包括其下面的li)没有鼠标时候，该ul就被隐藏

当然 多级菜单也可以用js来实现~~~

代码如下：存为 menu.html 即可查看效果

css实现的menu

.menu {   z-index:3;   font-size: 12px;}

.menu ul {   padding: 0;   margin: 0;   list-style-type: none;   width: 100px;   position: relative;}

.menu li {   background: #AFDD22;   height: 26px;   position: relative; }

.menu li {   float: left;   margin-left: -16px;   margin-left: 0;   position: relative; }

.menu a, .menu a:visited {   display: block;   text-decoration: none;   height: 25px;   line-height: 25px;   width: 100px;   text-indent: 5px;   border-bottom: 1px solid #fff;

}

.menu a:hover {   color: #fff;   background: #40DE5A;}

.menu ul ul {   visibility: hidden;   position: absolute;   top: -1px;   left: 100px;}

.menu ul li:hover ul, .menu ul a:hover ul {   visibility: visible;}

.menu ul :hover ul ul {   visibility: hidden;}

.menu ul :hover ul :hover ul {   visibility: visible;}

        菜单一»                 菜单一1»                         菜单一1-1              菜单一1-2                              菜单一2         菜单一3　　»                        菜单一3-1              菜单一3-2                                      菜单二  

结果如下：