image.png

    实现这样的菜单，功能点：
    1、静态布局：

    • hover出现菜单子项：纯css
    • 点击出现菜单子项：js控制

    2、根据json对象渲染出菜单

    难点分析：
    Q1：html怎么布局？
    => 每一层级的选项用ul包裹，li是当前层的各个具体项

    Q2：css控制 第一行是横着的，其余的是竖着的：
    1、二级菜单相对于一级竖着排
    2、三级及以后的都是相对父级横着扩展

    原生的不加修饰的效果：
    image.png

    1. # step1 menu横着摆放，子项默认
    2. + div.menuwrapper ul {
    3. +    position: relative;
    4. +    float: left;
    5. + }
    6. /* 一级菜单 */
    7. + div.menuwrapper ul li {
    8. +     position: relative;
    9. +     float: left;
    10. + }
    12. /* 二级菜单 */
    13. + div.menuwrapper ul ul {
    14. +    display: none;
    15. +}

    image.png

    1. # 二级菜单相对于一级菜单 竖着，上下对齐
    2. /* 二级菜单 */
    3. div.menuwrapper ul ul {
    4.      display: none;
    5. +    position: absolute;
    6. +    top:100%;
    7. +    left:0;
    8. }
    9. # hover一级菜单 二级菜单显示
    10. +div.menuwrapper ul li:hover > ul {
    11. +    display: block;
    12. +}

    image.png

    1. # 三级菜单及以后 相对于上级菜单 横向对齐
    2. /* 三级及以后 */
    3. +div.menuwrapper ul ul ul{
    4. +    position: absolute;
    5. +    left:100%;
    6. +    top:0;
    7. +}

    image.png