界面组件--导航菜单

首先把整个导航菜单放在一个DIV里，好定位它在页面的位置（也方便管理li的长度）。li用来设置各菜单项之间的距离，将a的display属性设置为block，使整个li都可以点击，然后设置padding留空白。这是自己看着书上的图片做的，下拉菜单因为改成绝对定位使父元素的长度变短，继承长度后也变短了，使内容换行，给下拉菜单li添加足够宽度后，暂时解决了这个问题。

上面写的这个代码有很多冗长的地方，比如：

.nav1 ul li:hover ul li ul{display:none;}
.nav1 ul li ul li:hover ul{display:block; position:absolute; left:100%; top:0;12em;}

书上的讲解如下：

<nav class="multi_drop_menu">
    <ul>
        <li><a href="#">Power</a></li>
        <li><a href="#">Money</a></li>
        <li><a href="#">Love</a></li>
        <li><a href="#">Fame</a>
            <!--二级菜单-->
            <ul>
            <li><a href="#">Sports Star</a></li>
            <li><a href="#">Movie Star</a></li>
            <li><a href="#">Rock Star</a>
                <!--三级菜单-->
                <ul>
                <li><a href="#">Bruce Springsteen</a></li>
                <li><a href="#">Bono</a></li>
                <li><a href="#">Mick Jagger</a></li>
                <li><a href="#">Bob Dylan</a></li>
                </ul>
                <!--三级菜单介绍-->
            </li>
            <li><a href="#">Web Designer</a></li>
            </ul>
            <!--二级菜单结束-->
        </li>
    </ul>
</nav>

提倡把视觉样式与功能样式分开

.multi_drop_menu a{
    display:block;  /*让链接充满列表项*/
    padding:.2em 1em;
    color:#555;
    background-color:#eee;
    border-width:3px;  /*作为列表项之间的分隔宽度*/
    border-color:transparent;
}
.multi_drop_menu a:hover{
    color:#fff;
    background-color:#aaa;
}

/*添加功能样式*/
.multi_drop_menu ul{float:left;} /*强制ul包围li*/
.multi_drop_menu li{
    float:left;
    list-style:none;
    position:relative; /*为子菜单提供定位上下文*/
}
.multi_drop_menu li a{
    display:block;
        border-right-style:solid; /*给每一个链接添加一个右边框*/
        /*背景只出现在内边距区域后面*/
        background-clip:padding-box;
        text-decoration:none;
}

.multi_drop_menu li;last-child a{boder-right-style:none;}
.multi_drop_menu li ul{display:none;}/*临时隐藏低级菜单*/

为了保证用户体验，所有视觉样式--内边距、背景、边框，等等，都要应用给链接a，而不要应用给ul或li，以便热区（可点击区域）最大化，让用户鼠标经过时不会产生鼠标状态切换。为达到这个目的，同时还要从视觉上分隔链接，这里使用了background-clip:padding-box声明，这样就可以阻止链接的背景延伸到边框后面。然后，让边框透明，在链接之间产生间隙，让后面的页面能够透过边框被看到。如此一来，不用外边距也能分隔链接，而且鼠标从一个菜单项移动到另一个菜单项时，也不会出现光标切换，菜单项之间从视觉上是分开，但实际上却是紧紧挨在一块的。

.multi_drop_menu li ul{width:9em;}
.multi_drop_menu li li a{
    border-right-style:none;/*去掉继承的右边框*/
    border-top-style:solid;/*添加上边框*/
}
.multi_drop_menu li ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
}
.multi_drop_menu li li{
    float:none;  /*停止浮动，恢复堆叠，由于ul宽度为9em，这里不设置，它们也是堆叠的*/
}
.multi_drop_menu li li ul{display:none;}

顶边会与父元素底边恰好对齐。它与父元素之间的间隙，实际上是下拉菜单中第一个链接的边框

.multi_drop_menu li:hover>ul{display:block;}
.multi_drop_menu li li ul{
    position:absolute;
    left:100%;
    top:0;
}

.multi_drop_menu li:hover>a{
    color:#fff;
    background-color:#aaa;
}

上面第二行的意思是：当鼠标移动到列表项上时，就显示它的子列表。这里的:hover触发器是设定在li元素而非链接自身上的。这样做是因为我们想要显示li的子元素ul，而它不是想链接的子元素。此外，为了只显示其子元素，悬停列表项与子列表之间还有一个字选择符>,如果没有这个子选择符，当顶级菜单项处于悬停状态时，会同时显示二级和三级菜单

最后一行的效果：

:hover事件会沿着元素的结构层次“向上冒泡”。所以，把:hover设定在li元素，就相当于也把它设定给了所有祖先li元素。然后，只要再给其子元素（链接）设定样式即可。这个改进能够极大地提高菜单的易用性。

代码重用

<nav class="multi_drop_menu vertical">

.multi_drop_menu.vertical{width:8em;}
.multi_drop_menu.vertical li a{
    border-right-style:none;
    border-top-style:solid;  
}
.multi_drop_menu.vertical li li a{border-left-style:solid;}
.multi_drop_menu.vertical ul,
.multi_drop_menu.vertical li{
    float:none;
}
.multi_drop_menu.vertical li ul{
    left:100%;
   top:0;
}

为侧栏设置垂直菜单

只在导航容器有vertical类的情况下才起作用

这里为nav容器设定了宽度。如果不设定导航容器宽度，那么nav及其包含的顶级菜单项都会尽可能延伸。最后，我们把二级菜单与顶级菜单的位置关系，设定成了前面三级菜单和二级菜单之间的关系，即让子菜单顶边与父菜单项顶边对齐。还去掉了顶级菜单项的右边框，代之以上边框