下拉框HTML、css

Original 2018-12-12 11:42:26 119
abstract:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>下拉框</title>    <style>   &nbs

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>下拉框</title>
   <style>
       *{margin: 0px;padding: 0px;}
       ul li{list-style: none;}
       a{text-decoration: none;}
       .clear{clear:both;}
       .header{width: 100%;background-color: #ccc;}
       .header_a{width: 1000px;height: 40px;line-height: 40px;margin: 0 auto;}
       .header_b{height: 40px;float: left;}
       .header_c {color: #000;height: 40px;width:100px;display: inline-block;text-align: center;position: relative;}
       .header_c:hover{background-color: #fff;}
       .header_c ul{display: none;}
       .header_c:hover ul{display: block;position: absolute;}
       .goods{background-color: orange;width: 100px;height: auto;text-align: center;color: #000;}
   </style>
</head>
<body>
<div class="header">
   <div class="header_a">
       <div class="header_b">
           <a href="" class="header_c">首页</a>
           <a href="" class="header_c">女装
              <ul class="goods">
                 <li>上衣</li>
                 <li>裙装</li>
                 <li>裤子</li>
                 <li>女鞋</li>
                 <li>配饰</li>
              </ul>
           </a>
           <a href="" class="header_c">男装</a>
           <a href="" class="header_c">数码产品</a>
       </div>
   </div>
   <div class="clear"></div>
</div>
</body>
</html>



Correcting teacher:灭绝师太Correction time:2018-12-12 11:58:05
Teacher's summary:下拉菜单,如果要有效,还是要配合js才行的

Release Notes

Popular Entries