WEB第二次作业

最新推荐文章于 2026-01-08 11:09:44 发布

原创最新推荐文章于 2026-01-08 11:09:44 发布 · 862 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           #menu{
               background-color: blue;
               width: 100%;
               height: 40px;
           }
           .item{
               float: left;
               width: 100px;
               height: 40px;
               line-height: 40px;
               text-align: center;
               position: relative;
               color: lightblue;
           }
           .item:hover{
               background-color: red;
               color: gold;
           }
           #container{
               width: 720px;
               margin: auto;
           }
           .down_menu>div{
               background-color: blue;
               color: white;
           }
           .down_menu{
               background-color: gold;
               display: none;
               position: absolute;
           }
           .item:hover>.down_menu{
               display: block;
               width: 100px;
               height: 40px;
               left: 0px;
               top: 40px;

           }
       </style>
   </head>
   <body>
       <div id="menu">
           <div id="container">
               <div class="item">我的京东
                   <div class="down_menu">
                       <div>我的浏览</div>
                       <div>我的优惠价</div>
                   </div>
               </div>
               <div class="item">购物车
                   <div class="down_menu">
                       <div>选取商品结算</div>
                       <div>清空购物车</div>
                       <div>删除所选的商品</div>
                   </div>
               </div>
               <div class="item">我的收藏夹
                   <div class="down_menu">
                       <div>收藏的商品</div>
                       <div>收藏的店铺</div>
                   </div>
               </div>
           </div>

       </div>
   </body>
</html>