菜单显示隐藏

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">contentdiv>
        li>

        <li class="list">
            <p class="title"><a href="">设计创作a>p>
            <p class="content"><a href="">平面设计a><a href="">游戏美术设计a><a href="">CADa>p>
            <div class="hide" id="it2">content2div>
        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">content3div>
        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">content4div>
        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">content5div>
        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">content6div>
        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标签里面

转载于:https://www.cnblogs.com/webstong/p/5903261.html

你可能感兴趣的:(前端,运维)