下拉滑动二级菜单

下拉滑动二级菜单的应用还挺多的，比较美观。
各层之间颜色的搭配挺重要的，多试几次。
难点在把层次关系搞清楚，否则html布局都不知道从何下手。

---

主要分为三层

1. 底层是class="menu-body"，高度为50px，宽度100%；hover触发高度变为300px；注意要写overflow:hidden，否则超出来的ul就会一直显示；设置transition过渡属性才会出现滑动的效果，由hover触发。

2. 中层是class="menu-head"，高度为50px，宽度100%。

3. 上层是三个列表，用class="menu-content"包裹起来，设置一个正好能够包裹住ul的宽度，方便用margin:0 auto居中；选中所有li设置一个宽度，height和line-height相同，以便垂直居中。

html代码：

<div class="menu-body">
    <div class="menu-head">
        <div class="menu-content">
            <ul>
                <li class="menu-caption">新疆</li>
                <li><a>乌鲁木齐</a></li>
                <li><a>伊犁</a></li>
                <li><a>石河子</a></li>
            </ul>
            <ul>
                <li class="menu-caption">西藏</li>
                <li><a>拉萨</a></li>
                <li><a>林芝</a></li>
                <li><a>日喀则</a></li>
            </ul>
            <ul>
                <li class="menu-caption">台湾</li>
                <li><a>台北</a></li>
                <li><a>桃园</a></li>
                <li><a>垦丁</a></li>
            </ul>
        </div>
    </div>
</div>

css代码：

*{
    margin:0px;
    padding:0px;
}    
.menu-body{
    height:50px;
    background:#FFD6A4;
    overflow:hidden;
    transition:ease 0.5s;
}
.menu-body:hover{
    height:300px;
}
.menu-head{
    height:50px;
    background:#F38181;
}
.menu-content{
    width:600px;
    margin:0 auto;
}
.menu-content ul{
    display:inline-block;
    height:300px;
    list-style:none;
}
.menu-content ul:hover{
    background:rgba(100,100,100,0.1);
}
.menu-content ul li{
    width:180px;
    height:50px;
    line-height:50px;
    color:#45171D;
    font-size:16px;
    font-weight:700;
    text-align:center;
}
.menu-content a{
    color:#45171D;
    cursor:pointer;
    text-decoration:none;
}
.menu-content a:hover{
    text-decoration:underline;
}
.menu-caption{
    font-size:18px;
}