首页 > 代码库 > 菜单显示隐藏
菜单显示隐藏
<!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标签里面
菜单显示隐藏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。