码迷,mamicode.com
首页 > 其他好文 > 详细

下拉列表

时间:2018-10-10 20:10:41      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:oat   width   hid   one   pad   经济   列表   htm   ext   

   外面的结构层一定要写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>

下拉列表

标签:oat   width   hid   one   pad   经济   列表   htm   ext   

原文地址:https://www.cnblogs.com/shangjun6/p/9768486.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!