<body> <div class="page"> <div class="nav"> <ul class="list1"> <li class="list1-Dem">标题 <ul> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> </ul> </li> </ul> <ul class="list1"> <li class="list1-Dem">标题 <ul> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> </ul> </li> </ul> <ul class="list1"> <li class="list1-Dem">标题 <ul> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> </ul> </li> </ul> <ul class="list1"> <li class="list1-Dem">标题 <ul> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> </ul> </li> </ul> <ul class="list1"> <li class="list1-Dem">标题 <ul> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> <li>二级栏目 <div class="list3"> <ul> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> <li>三级栏目</li> </ul> </div> </li> </ul> </li> </ul> </div> </div></body>
*{ margin: 0; padding: 0;}.page{ width: 100%; height: 10025px; background: url("../img/tao.png") no-repeat center top;}.nav{ width: 160px; height: auto; background-color: coral; position: fixed; left: 1px; top: 10%; margin-top: 205px; font-family: '微软雅黑'; text-align: center;}.list1{ width: 160px; height: 40px; list-style:none; cursor: pointer; padding: 2px; margin: 1px;}.list1-Dem{ width: 160px; height: auto; color:#fff; border-bottom: 1px solid #fff; line-height: 40px; font-size: 20px; text-decoration: none; display: inline-block;}.list1-Dem ul{ width: 160px; height: auto; display: none; position: relative; background-color: #ccc; padding: 2px; margin: 1px;}.list1-Dem ul li{ width: 160px; height: 40px; color: #fff; font-size: 16px; border-bottom: 1px dashed #000; line-height: 40px;}.list1:hover .list1-Dem ul{ display: block;}.list3{ height: 40px; width: 160px; position: absolute; left: 160px; top: 0; display: none; padding: 2px; margin: 1px;}.list3 ul { width: 160px; height: 40px;}.list3 ul li{ width: 160px; height: 40px; font-size: 16px; line-height: 40px; border-bottom: 1px solid #fff; background-color: #666666;}.list1-Dem ul li:hover .list3{ display: block;}.list1-Dem:hover, .list1-Dem:active{ background-color: red;}.list1-Dem ul li:hover, .list1-Dem ul li:active{ background-color: red;}没有设置元素的堆叠顺序