关键属性

display：none 隐藏元素

display：bolck 显示元素

实例

 CSS样式

    <style>* {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;}.nav1 {width: 400px;height: 50px;/* border: 1px solid red; */margin: 200px auto;}.nav1>li {float: left;}.nav1 a {display: block;width: 100px;height: 50px;border: 1px solid #333;box-sizing: border-box;font: 14px/50px "宋体";color: #333;text-align: center;}.nav2 {/* 初始隐藏二级导航 */display: none;/* 相对定位 */position: relative;}.nav1 li:hover .nav2 {display: block;}.nav3 {width: 300px;height: 200px;border: 1px solid #333;box-sizing: border-box;/* 绝对定位 */position: absolute;left: 100px;top: 0px;font: 16px/200px "宋体";color: #333;text-align: center;/* 隐藏三级导航 */display: none;}.nav2 li:hover .nav3 {/* 显示三级导航 */display: block;}.nav1 li:hover .a1 {background-color: #333;color: #fff;}.nav2 li:hover .a2 {background-color: #333;color: #fff;}</style>

html结构

 <ul class="nav1"><li><a href="#" class="a1">一级导航</a><ul class="nav2"><li><a href="#" class="a2">二级导航</a><div class="nav3">三级导航①</div></li><li><a href="#" class="a2">二级导航</a><div class="nav3">三级导航②</div></li><li><a href="#" class="a2">二级导航</a><div class="nav3">三级导航③</div></li><li><a href="#" class="a2">二级导航</a><div class="nav3">三级导航④</div></li></ul></li></ul>