网页的下拉

1、显示隐藏法（不能添加过渡的效果）

将子盒子定在用定位父盒子下面，给盒子宽高，里面内容写好后，将该盒子隐藏，当鼠标经过父盒子是让子盒子显示。

<a href="#" target="_blank" class="topbar-download">下载app
    <ul class="appcode">
        <li><img src="images/download.png" alt=""></li>
        <li>小米商城APP</li>
        <li class="section_help"></li>
    </ul>
</a>

.site-topbar .topbar-download {
    position: relative;
}

.site-topbar .topbar-download:hover .appcode {
    display: block;
}

.topbar-download .appcode {
    position: absolute;
    display: none;
    z-index: 10;
    top: 100%;
    left: 50%;
    margin-left: -62px;
    background-color: pink;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    width: 124px;
    height: 140px;
    text-align: center;
    background-color: #fff;
}

2、高度为0法

将子盒子定在用定位父盒子下面，给盒子宽高，里面内容写好后，将该盒子高度设为0而且溢出隐藏，当鼠标经过父盒子是让子盒子有一定的高度。

<a href="" target="_blank" class="shop"> 购物车（0)
    <div class="shop_content">购物车中还没有商品，赶紧选购吧！</div>
</a>

.top_right .shop {
    position: relative;
    font-family: 'icomoon';
    width: 120px;
    padding: 0 10px;
    background-color: #424242;
    text-align: center;
}

.top_right .shop:hover {
    color: #ff6700;
    background: #fff;
}

.shop .shop_content {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 20;
    overflow: hidden;
    width: 316px;
    height: 0px;
    color: #000;
    line-height: 100px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
    transition: all .6s;
}