侧边导航栏为何三级栏目无法显示?

侧边导航栏为何三级栏目无法显示?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

  <title>position定位综合运用</title>

  <style type="text/css">

      *{padding:0;margin:0;}

      .one{width:100%;height:4043px;background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png) center top no-repeat;position:relative;}

      .two{width:200px;height:400px;background:url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png) no-repeat;position:fixed;right:0px;top:50%;margin-top:-100px;}

      .three{width:160px;height:205px;position:fixed;left:0px;top:50%;margin-top:-103px;font-family:微软雅黑;}

      .for{width:160px;height:auto;border-bottom:1px solid #fff;background: #333;text-align:center;line-height:40px;color:#FFF;font-size:16px;cursor:pointer;}

      .tit{width:160px;height: 40px;}

      .for:hover ul{display: block;}

      .for ul{width:160px;height: auto;background: #FFF;display:none;}

       .for ul li{width: 160px;height:40px;border-bottom:1px dashed #666;text-align: center;line-height: 40px;color:#333;position:relative;}

       .for ul li:hover .list3{display:block;}

       .list3{width: 160px;height: auto;position:absolute;left:160px;top:0px;display:none;}

       .list3Dom{width: 160px;height: 40px background:#444;border-bottom:1px solid #FFF;text-align:center;line-height: 40px;color:#FFF;}

  </style>

</head>

<body>

   <div class="one">

       <div class="three">

          <div class="for">

            <div class="tit">慕课网的标题</div>

                           <ul>

                             <li>

                                 二级栏目

                                 <div class="list3">

                                  <div class="list3Dom">三级栏目</div>

                                  <div class="list3Dom">三级栏目</div>

                                  <div class="list3Dom">三级栏目</div>

                                 </div>

                             </li>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                           </ul>

          </div>

          <div class="for">慕课网的标题

           <ul>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                           </ul></div>

          <div class="for">慕课网的标题

           <ul>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                           </ul></div>

          <div class="for">慕课网的标题

           <ul>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                           </ul></div>

          <div class="for">慕课网的标题

           <ul>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                             <li>

                                 二级栏目

                             </li>

                           </ul></div>

       </div>

   </div>

   <div class="two"></div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

三级栏目显示出来了呀,只不过你只给第一个二级栏目设置了3级栏目的内容,所以只有第一个有效果,其他的不行

http://img1.sycdn.imooc.com//climg/5ac09c390001717e03800269.jpg

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师