CSS 实现：鼠标移动上去显示 div,移开隐藏 div

下面代码实现的功能是，鼠标移动过去家电，洗护，衣物，会弹出来列表

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          *{
              margin:0;
              padding:0;
              list-style:none;
          }
            .big{
              margin:auto;/*居中*/
              width:150px;
              height:252px;
          }
            h3{
              width:148px;
              height:38px;
              background-color:#EDEDED;
              text-align:center;
              font-size:25px;
              font-weight:400;
              line-height:38px;
          }
          ul{
              display:none;/*隐藏*/
              border:1px solid #ccc;
          }
          ul li{
              text-align:center;
              padding:5px 0 5px 0;
          }
          .div1:hover .elec{
              display:block;/*显示*/
          }
                    .div2:hover .wash{
              display:block;
          }
                    .div3:hover .clothes{
              display:block;
          }

        </style>
    </head>
    <body>
    <div class="big">
        <div class="div1">
            <h3>家电</h3>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>
        <div class="div2">
            <h3>洗护</h3>
            <ul class="wash">
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul>
        </div>
        <div  class="div3">
            <h3>衣物</h3>
             <ul class="clothes">
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul>
        </div>
      </div>
</body>
</html>