左侧导航栏

html：

<!--左侧导航栏-->
<div id="body_3">
<div id="div1">
    <ul>
        <li><span>test</span>
            <div class="right">
                <p>
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </p>
            </div>
        </li>
        <li><span>test</span>
            <div class="right">
                <p>
                   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                </p>
            </div></li>
        <li><span>test</span>
            <div class="right">
                <p>
                    ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
                </p>
            </div></li>
    </ul>
</div>

css：

#body_3{
    width: 1000px;
    height: 300px;
    background-color: aquamarine;
    margin: 0px auto;
    margin-top: 10px;
    position: relative;
}

#div1{
    width: 200px;
    height: 300px;
    background-color: burlywood;
    float: left;
}

#div2{
    width: 800px;
    height: 300px;
    background-color: cadetblue;
    float: left;
}

#div1 ul li{
    display: block;/*这是关键！！！！！！把它变成一个区快*/
    text-align: center;
    width: 200px;
    height: 30px;
    background-color: crimson;
    color: white;
    border: 1px solid seagreen;
    border-collapse: collapse;
}

#div1 ul li:hover{
    cursor:pointer;
}

.right{
    width: 800px;
    height: 300px;
    background-color: white;
    position: absolute;
    left: 200px;
    top: 0px;;
    display: none;
}

js：

$(document).ready(function(){  
    //左侧导航栏
    $("#div1 li").mouseenter(function(){
        $(this).css({"background":"white","color":"red"});
        $("#div1 li").not($(this)).css({"background":"crimson","color":"white"});

        $(this).find(".right").show();
    });
    $("#div1 li").mouseleave(function(){
        $(this).find(".right").hide();
        $(this).css({"background":"crimson","color":"white"});
    });
});