请问哪里有问题?为什么效果是那样,而且没有三级项目?

请问哪里有问题?为什么效果是那样,而且没有三级项目?

<!DOCTYPE html>


<html>


<head>


    <meta charset="UTF-8">


<title></title>


<style type="text/css">

   body,div{margin: 0;padding: 0;}

   .page{background:url("http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png");

         width:100%;

         height:1000px;

         position: relative;}


    .nav{

         top:50%;

         height: auto;

         width: 160px;

         line-height: 40px;

         background-color: #000;

         color:#fff;

         font-family: "微软雅黑";

         position: fixed;

         margin-top:;}

     .tit{text-align: center;

          height: 60px;

          line-height: 60px;

           border-bottom:  1px solid #fff;}

     .nav-1 {border-bottom:  1px solid #fff;

             height: auto;

             width: 160px; 

            text-align: center;

            }

    .nav-1 ul{width: 160px;

             height:auto;

             list-style: none;

             }     

    .nav-1 ul li{

             border-bottom: 1px dashed #666;

             color:#333;

             width:160px;

             height:40px;

             background: #fff; 

             display: none;

             position: relative;} 

    .nav .nav-1:hover ul li{display: block;}                   

     .list{height: auto;

             position:absolute;

             left:160px;

             top:0;

             width:160px;

             display: none;}

     .list .list-3{border-bottom: 1px solid #666;

          background:#000;

                   color: #fff;

                   height: auto;

                   

                   position: absolute;} 

     .nav-1 ul li:hover .list{display: block;}                      

     

</style>

<body>

<div class="page">

<div class="nav">

<div class="tit">导航题目</div>


<div class="nav-1">导航项

<ul>

<li>二级项目

  <div class="list">

                  <div class="list-3">三级项目</div>

                  <div class="list-3">三级项目</div>

                  <div class="list-3">三级项目</div> 

                  </div>

</li>

<li>二级项目</li>

<li>二级项目</li>

</ul>

</div>

<div class="nav-1">导航项</div>

<div class="nav-1">导航项</div>

<div class="nav-1">导航项</div>

<div class="nav-1">导航项</div>

<div class="nav-1">导航项</div>

<div class="nav-1">导航项</div>

</div>

    </div>

    </div>

</body>

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

正在回答 回答被采纳积分+1

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

2回答
好帮手慕星星 2019-06-10 18:45:35

你好,给li设置也是可以的,但是建议设置在父容器上,这样整体进行显示与隐藏。

不显示三级项目是因为冒号没有在英文状态下,是中文状态的:

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

祝学习愉快!

好帮手慕星星 2019-06-10 17:22:14

你好,代码中样式有些问题:

(1)也给ul清除内外边距:

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

(2)要给ul设置隐藏,鼠标移入显示出ul,不要设置li哦:

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

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

自己测试下,祝学习愉快!

  • 提问者 慕大斯 #1
    请问老师为什么要给ul设置隐藏而不是li?另外我不显示三级项目是因为冒号没有在英文状态下么?
    2019-06-10 17:38:01
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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