css拾遗（一）

<style>
　　.left{
　　　　float:left;
　　}
　　.hide{
　　　　display:none;
　　}
　　a{
　　　　display:inline-block;
　　}
　　.item-div{
　　　　display:inline-block;    //此处为内联标签，其中包含了下面样式block块级标签，到鼠标滑动到.item-div时，块级标签会将原来布局撑开，使原来布局被破坏
　　}
　　item-div:hover item-set{
　　　　display:block;
　　}
</style>

        <div class="hl-menu left">
            <a href="" class-="item">菜单一</a>
            <a href="" class-="item">菜单二</a>
            <a href="" class-="item">菜单三</a>
            <div class="item-div">
                <a href="" class="item">菜单四</a>
                <div class="item-set hide">
                    <a href="">菜单四-1</a>
                    <a href="">菜单四-2</a>
                    <a href="">菜单四-3</a>
                    <a href="">菜单四-4</a>
                </div>
            </div>
        </div>

        .item-div:hover .item-set{
            display: block;
            position: absolute;　　　　//相对自己（body）进行页面排布，脱离文本流
        }

        .item-div .item-set a{
            display: block;
            background-color: #4cae4c;
        }

    <div class="pg-body">
        <div class="menus">

        </div>
        <div class="content">
            <div style="height: 2000px;">

            </div>
        </div>
    </div>

        .pg-body .menus{
            width: 200px;
            background-color: #4cae4c;
            position: absolute;
            bottom: 0px;
            top: 48px;
        }

        .pg-body .content{
            position: absolute;
            top: 48px;
            bottom: 0px;
            right: 0px;
            left: 200px;
            background-color: #1b6d85;
            overflow-y: scroll;
            overflow-x: hidden;
        }