侧边栏菜单和内容展示 - 网页设计与布局

<div class='sidebar'>
   <ul>    
       <li class='menu-item'>菜单项1</li>
       <li class='menu-item'>菜单项2</li>
       <li class='menu-item'>菜单项3</li>
   </ul>
   <div class='content'>
       <div class='content-item'>内容1</div>
       <div class='content-item'>内容2</div>
       <div class='content-item'>内容3</div>
   </div>
</div>
<style>
    .sidebar{
        width: 200px;
        height: 100%;
        background-color: #f1f1f1;
        float: left;
    }
    .sidebar ul{
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .sidebar ul li{
        padding: 10px;
        cursor: pointer;
    }
    .sidebar ul li:hover{
        background-color: #ddd;
    }
    .content{
        margin-left: 20px;
        height: 100%;
    }
    .content div {
        display: none;
    }
    .active {
        display: block;
    }
</style>