老师，为什么我设置了display ：none； display:block;没有效果？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
         *{
          margin:0;
          padding:0;
         }
         .back{
          background: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png) no-repeat center top;
          width:100%;
          height:4043px;
         }
         .nav{
          width:160px;
          height:205px;
            position:fixed;
          top:50%;
          left:0;
          margin-top:-103px;
          font-family:"微软雅黑";
         }
         .tit{
          width:160px;
          height:40px;
         }
         .nav-li :hover ul{
                     display: block;
         }
         .nav-li{
          width:160px;
          height:auto ;
          border-bottom:1px solid #fff;
          background:#333;
          text-align:center;
          line-height:40px;
          color:#FFF;
          font-size:16px;
          cursor:pointer;
         }
         .nav-li ul{
          width:160px;
          height:auto;
          background:#fff;
          display:none;
         }
         .nav ul li{
          width: 160px;
          height: 40px;
          border-bottom: #666 dashed ;
          color: #333;
          line-height:40px;
            
         }
</style>
</head>
<body>
  <div class="back">
     <div class="nav">
         <div class="nav-li">
         <div class="tit">慕课网的标题</div>
         <ul>
            <li>
                二级栏目
            </li>
            <li>
                二级栏目
            </li>
            <li>
                二级栏目
            </li>
            
         </ul>
         </div>
         <div class="nav-li">
         <div class="tit">慕课网的标题</div>
         <ul>
            <li>
                二级栏目
            </li>
            <li>
                二级栏目
            </li>
            <li>
                二级栏目
            </li>
            
         </ul>
         </div>
         <div class="nav-li">
         <div class="tit">慕课网的标题</div>
                    <ul>
            <li>
                二级栏目
            </li>
            <li>
                二级栏目
            </li>
            <li>
                二级栏目
            </li>
            
         </ul>
         </div>
         
       
     </div>
     

  </div>

</body>
</html>

慕尼黑6898850 2017-10-19

源自：CSS定位（position） 4-2 侧边栏导航跟随案例

收起

1回答

樱桃小胖子 2017-10-19 19:11:09

要设置鼠标经过时显示，鼠标离开后隐藏呀

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

祝学习愉快！

收起回答

提问者慕尼黑6898850 #1

老师，有啊，第29行，我设了

2017-10-19 21:21:46
樱桃小胖子回复提问者慕尼黑6898850 #2

.nav-li:hover 是要紧挨着的，不能有空格，你写的那个.nav-li和:hover之间有空格。

2017-10-20 14:30:24