下拉列表

   外面的结构层一定要写margin:0 auto;

  下来菜单的实例

  


<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
        *{
        margin:0;
        padding:0;
        }
        ul,ol{
       list-style:none;
        }
      .clearfix:after{
      content:"";
      display:block;
      visibility:hidden;
      height:0;
      clear:both;
      }
      .clearfix{
      zoom:1;
      }
      .nav{
      width:400px;
      /*border:red 1px solid;*/
      margin: 0 auto;
      display:block;

       }
        li{
        float:left;
        width:100px;
        line-height:3;
        text-align:center;
        background:black;
        color:white;
       }
        .list{
      display:none;
        }   

     .nav li:hover .list{

      display:block;
      }
    </style>
    </head>
    <body>
      <div class="nav">
        <ul class="clearfix">
          <li>
            首页
            <ul class="list">
              <li>天猫</li>
              <li>京东</li>
              <li>淘宝</li>
            </ul>
           </li>
          <li>
            新闻
            <ul class="list">
              <li>天猫</li>
              <li>京东</li>
              <li>淘宝</li>
            </ul>
          </li>
        <li>游戏</li>
        <li>经济</li>
       </ul>
      </div>
  </body>
</html>

posted on 2018-10-10 19:25  Web引领者  阅读(721)  评论(0编辑  收藏  举报