老师帮我看看代码可以实现，但有没有哪里不规范或者有更好的方式表达呢

来源：4-7 编程练习

无根鸟飞呀飞

2019-06-09 13:39:28

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          *{
            margin: 0px; padding: 0px;
        }
          .big{  
           width: 150px;
            margin: 0px auto;
            text-align: center;
        }
          ul{list-style-type: none;
            display: none;
            border-left: 1px solid gray;
            border-right: 1px solid gray;
            width: 100%;

           }
           h3{
             background-color: #eee;
             border: 1px solid #aaa;

           }
        .big .div1:hover ul{
            display: inline-block;
        }

         .big .div2:hover ul{
            display: inline-block;
        }

  .big .div3:hover ul{
            display: inline-block;
        }
.clothes{
    border-bottom: 1px solid gray;
}
          
        </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>

我感觉设置hover处虽然实现了效果，但是不太规范呢。

写回答

1回答