请帮我看一下，为什么我的二级栏目不能出现在标题的下面
来源：4-2 侧边栏导航跟随案例
技术渣渣ss
2019-01-23 14:50
<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;}
写回答
关注
1回答
-
- 某人心安
- 2019-01-23 15:33:12
没有设置元素的堆叠顺序
css定位 position
老师带你了解CSS中定位的知识，并运用到实际案例中。
49043 学习 · 92 问题
相似问题