*{
                margin: 0;
                padding: 0;
            }
            .menu{
                width: 200px;
                height: 400px;
                position: absolute;
                top:0;
                margin: 7px;
                border-radius: 3px;
                background: #F1F1F1;
                overflow: hidden;
                transition: all .6s linear;
            }
            .active{
                font-weight: 600;
            }
            .menu-scroll{
                width: 220px;
                height: 600px;
                overflow-y: auto;
            }
            .hide-menu-scroll{
                width: 200px;
            }
            .menu-scroll ul{
                list-style-type: none;
            }
            .menu-scroll ul li{
                font-size: 14px;
                padding: 10px;
            }
            a{
                color: seagreen;
            }
            a{
                text-decoration: none;
            }
            .view{
                transition: all; .6s linear;
            }
            .article{
                border: 1px solid saddlebrown;
                margin: 7px;
                margin-left: 214px;
                border-radius: 3px;
                box-shadow: ;
                padding: 15px;
                box-sizing: border-box;
            }

<div class="menu">
            <div class="menu-scroll">
                <ul class="hide-menu-scroll">
                    <li><a href="#menu1">菜单1</a></li>
                    <li><a href="#menu2">菜单2</a></li>
                    <li><a href="#menu3">菜单3</a></li>
                    <li><a href="#menu4">菜单4</a></li>
                    <li><a href="#menu5">菜单5</a></li>
                    <li><a href="#menu6">菜单6</a></li>
                    <li><a href="#menu7">菜单7</a></li>
                    <li><a href="#menu8">菜单8</a></li>
                    <li><a href="#menu9">菜单9</a></li>
                    <li><a href="#menu10">菜单10</a></li>
                    <li><a href="#menu11">菜单11</a></li>
                    <li><a href="#menu12">菜单12</a></li>
                    <li><a href="#menu13">菜单13</a></li>
                    <li><a href="#menu14">菜单14</a></li>
                    <li><a href="#menu15">菜单15</a></li>
                    <li><a href="#menu16">菜单16</a></li>
                </ul>
            </div>
        </div>
        <div class="view">
            <div>
                <div id="menu1" class="article" style="height: 300px;">
                    菜单1的内容
                </div>
                
                <div id="menu2" class="article" style="height: 350px;">
                    菜单2的内容
                </div>
                
                <div id="menu3" class="article" style="height: 400px;">
                    菜单3的内容
                </div>
                
                <div id="menu4" class="article" style="height: 200px;">
                    菜单4的内容
                </div>
                
                <div id="menu5" class="article" style="height: 400px;">
                    菜单5的内容
                </div>
                
                <div id="menu6" class="article" style="height: 250px;">
                    菜单6的内容
                </div>
                
                <div id="menu7" class="article" style="height: 500px;">
                    菜单7的内容
                </div>
                
                <div id="menu8" class="article" style="height: 400px;">
                    菜单8的内容
                </div>
                
                <div id="menu9" class="article" style="height: 300px;">
                    菜单9的内容
                </div>