请问老师,我这么实现可以么?另外第一个家电列表我使用了一个笨方法,请问要怎么样用css方式实现?

请问老师,我这么实现可以么?另外第一个家电列表我使用了一个笨方法,请问要怎么样用css方式实现?

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

          body,div,h3,ul{margin:0;

              padding:0;}

              

         .big{background:#ececec;

              text-align:center;

              width:100px;

              border:1px solid #d9dde1;

              font-family:"宋体";

              line-height:30px;

         }

          

         

          h3{border:1px solid #d9dde1;}

          

          li{display:none;

          background:white;

          line-height:30px;}

          .div1:hover li{display:block;}

          .div2:hover li{display:block;}

          .div3:hover li{display:block;}

          

          

        </style>

    </head>

    <body>

    <div class="big">

        <div class="div1">

            <h3>家电</h3>

            <ul class="elec">

                <li>冰箱</li>

                <li>&nbsp;&nbsp;洗衣机</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>


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

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

1回答
好帮手慕夭夭 2019-05-30 19:26:45

你好同学,这样实现是可以的。同学想要实现下拉菜单的文字左对齐,可以通过padding-left去做,代码可以如下进行调整。

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

祝学习愉快 ,望采纳。

  • 提问者 慕大斯 #1
    谢谢,但是根据您的方法效果还是不对,li列表整体偏右,并且 “家电”列表也没有左对齐?
    2019-05-31 13:54:01
  • 好帮手慕夭夭 回复 提问者 慕大斯 #2
    同学请把你修改的代码粘贴到问答区域,以便老师帮助你查找问题哦
    2019-05-31 19:43:18
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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