菜单显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单显示隐藏</title>
    <style>
        *{
            margin:0;padding:0;
            font-family: "微软雅黑";
        }
        a{
            text-decoration: none;
            color:#fff;
            display: inline-block;
        }
        #menu {
        }
        li{
            list-style-type: none;
            background-color: #0477c0;
            border-bottom:1px solid #1681c4;
            width:220px;
            height:70px;
        }
        .content a{
            margin-left:13px;
        }
        .title{
            margin-left:15px;
            padding-top:14px;
        }
        .content{
            margin-left:2px;
            margin-top:4px;
        }
        .content a{
            color:#97D2F7;
            font-size: 14px;
        }
        .hide{

            background-color: #00be3c;
            display: none;
            position: absolute;
            left:220px;
        }
        #it{
            width:600px;
            height:400px;
            top:0;

        }
        #it2{
            top:71px;
            width:800px;
            height:500px;
        }
        #it3{
             top:142px;
             width:300px;
             height:200px;
        }
        #it4{
            top:213px;
            width:650px;
            height:350px;
        }
        #it5{
            top:284px;
            width:300px;
            height:200px;
        }
        #it6{
            top:355px;
            width:300px;
            height:200px;
        }
    </style>
</head>
<body>
<div id="menu">
    <ul>
        <li class="list">
            <p class="title"><a href="">IT互联网</a></p>
            <p class="content"><a href="">前端开发</a><a href="">Linux运维</a></p>
            <div class="hide" id="it">content</div>
        </li>

        <li class="list">
            <p class="title"><a href="">设计创作</a></p>
            <p class="content"><a href="">平面设计</a><a href="">游戏美术设计</a><a href="">CAD</a></p>
            <div class="hide" id="it2">content2</div>
        </li>
        <li class="list">
            <p class="title"><a href="">语言留学</a></p>
            <p class="content"><a href="">实用口语</a><a href="">雅思</a><a href="">托福</a></p>
            <div class="hide" id="it3">content3</div>
        </li>
        <li class="list">
            <p class="title"><a href="">职业考证</a></p>
            <p class="content"><a href="">公考求职</a><a href="">财会金融</a><a href="">医疗卫生</a></p>
            <div class="hide" id="it4">content4</div>
        </li>
        <li class="list">
            <p class="title"><a href="">升学考研</a></p>
            <p class="content"><a href="">考研</a><a href="">大学</a><a href="">高中</a><a href="">初中</a></p>
            <div class="hide" id="it5">content5</div>
        </li>
        <li class="list">
            <p class="title"><a href="">兴趣生活</a></p>
            <p class="content"><a href="">摄影</a><a href="">乐器</a><a href="">美妆</a><a href="">育儿</a></p>
            <div class="hide" id="it6">content6</div>
        </li>
    </ul>
</div>
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {
        $(".list").mouseover(function () {
            $(this).children(".hide").show();
        });
        $(".list").mouseout(function () {
            $(this).children(".hide").hide();
        })
    })
</script>
</body>
</html>
注意：隐藏内容要放到li标签里面
菜单显示隐藏

推荐阅读
