简单的下拉框实现

原创 2018-11-09 20:06:19 8
摘要:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>淘宝头导航条</title> <link rel="stylesheet" type="text/css" href

QQ图片20181109200139.pngQQ图片20181109200240.png

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>淘宝头导航条</title>
 <link rel="stylesheet" type="text/css" href="css/index.css">
 
</head>
   <div></div>
        <div>
             <div>
                 <a href="" style="color: #000;">中国大陆</a>
                 <a href="" style="color: #FF5000">亲,请登录</a>
                 <a href="">免费注册</a>
                 <a href="">手机逛淘宝</a>
             </div>
             <div>
                <a href="">淘宝网首页</a>
                <a href="">我的淘宝
                <ul>
                   <li>以买到的宝贝</li>
                   <li>我的足迹</li>
                </ul>
   
                </a>
                <a href="">购物车</a>
                <a href="">收藏夹</a>
                <a href="">跨境物流管理</a>
                <a href=""海外消费者帮助></a>
             </div>
        </div>
        <div></div>
   </div>
<body>
 
</body>
</html>

 *{margin: 0px;padding: 0px;}
   a{text-decoration: none;color: #6c6c6c;font-size: 13px;margin-right: 5px;}
   ul{list-style: none;}
   .header{background-color: #F5F5F5;width: 100%;}
      .clear{clear: both;}
      .header_content{width: 1200px;margin: 0px auto; line-height: 40px;}
      .header_content_left{height: 40px;float: left;  /* background: pink; */}
       .header_content_right{height: 40px;float: right; /* background: pink; */}
     /*.header_content_left a{}*/
     .header_content_left_a{display: inline-block;text-align: center;position: relative;}
     .header_content a:hover{color: #FF5000}
     .header_content_left_a:hover{background-color: white;}
     .header_content_left_a ul{border: 1px solid #F5F5F5;display: none;}
     .header_content_left_a li{color: #6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 5px 0px;}
     .header_content_left_a:hover ul{display: block;position: absolute;width: 100px;}
     .header_content_left_a li:hover{background-color:  #F5F5F5;}

批改老师:Peter-Zhu批改时间:2018-11-09 21:42:01
老师总结:这个案例,最核心的思想是,用绝对定位技术实现.绝对定位在实际开发中,远比相对定位实用

发布手记

热门词条