完善商品分类侧边栏

最新推荐文章于 2023-07-10 07:16:19 发布

时松波

最新推荐文章于 2023-07-10 07:16:19 发布

阅读量263

点赞数

文章标签： servlet html java

本文链接：https://blog.csdn.net/weixin_52281428/article/details/126090715

版权

HTML CSS 导航菜单交互设计网页布局

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>全部商品分类</title>
       <style>
           *{
               padding: 0;
               margin: 0;
           }
           #nav{
               width: 240px;
           }
           .title{
               padding: 5px 5px 5px 20px;
               font-size: 20px;
               color: #fff;
               background-color: red;
           }
           .title:hover+ul{
               height: 220px;

                           }
           ul{
               height: 0px;
               padding: 0px 0 0 25px;
               background-color: gray;
               overflow: hidden;
               transition: all .6s;

           }
           li{
               padding: 5px 10px 5px;
               list-style: none;
           }
           img {
               float: right;
               vertical-align: middle;
           }
           a{
               text-decoration: none;
               color: black;
           }
       </style>
   </head>
   <body>
       <div id="nav">
       <div class="title">全部商品分类 <img src="css/arrow-down.gif"/></div>
       <ul>
       <li><a href="#">图书</a>  <a href="#">音像</a>  <a href="#">数字商品</a> <img src="css/arrow-right.gif"/></li>
       <li><a href="#">家用电器</a>  <a href="#">手机</a>  <a href="#">数码</a> <img src="css/arrow-right.gif"/></li>
       <li><a href="#">电脑</a>  <a href="#">办公</a> <img src="css/arrow-right.gif"/></li>
       <li><a href="#">家居</a>  <a href="#">家装</a>  <a href="#">厨具</a> <img src="css/arrow-right.gif"/></li>
       <li><a href="#">服饰鞋帽</a>  <a href="#">个护化妆</a> <img src="css/arrow-right.gif"/></li>
       <li><a href="#">礼品箱包</a>  <a href="#">钟表</a>  <a href="#">珠宝</a> <img src="css/arrow-right.gif"/></li>
       <li><a href="#">食品饮料</a>  <a href="#">保健食品</a><img src="css/arrow-right.gif"/></li>
       <li><a href="#">彩票</a>  <a href="#">旅行</a>  <a href="#">充值</a>  <a href="#">票务</a><img src="css/arrow-right.gif"/></li>
       </ul>
       </div>
   </body>
</html>