HTML/CSS 二级菜单 矫情吗;* 2023-01-01 14:57 67阅读 0赞 ### HTML/CSS 二级菜单 ### 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { text-decoration: none; color: #000;; font-size: 14px; } a:hover { color: rgb(253, 141, 114); } li , ul{ margin: 0; padding: 0; list-style-type: none; } ul.container li { width: 187px; height: 30px; line-height: 30px; padding-left: 5px; border-bottom: 1px dashed rgb(204, 204, 204); } .container { position: relative; width: 192px; border: 1px solid rgb(204, 204, 204); background-color: rgb(2550, 250, 250); margin: 50px auto; } .sub-container { position: absolute; top: -1px; left: 192px; display: none; width: 300px; border: 1px solid blue; } .container li:hover .sub-container { display: block; height: 100%; } </style> </head> <body> <ul class="container"> <li> <a href="#">家用电器</a> <div class="sub-container">111</div> </li> <li> <a href="#">手机 / 运营商 / 数码</a> <div class="sub-container">222</div> </li> <li> <a href="#">电脑 / 办公</a> <div class="sub-container">333</div> </li> <li> <a href="#">家居 / 家具 / 家装 / 厨具</a> <div class="sub-container">444</div> </li> <li> <a href="#">男装 / 女装 / 童装 / 内衣</a> <div class="sub-container">555</div> </li> <li> <a href="#">美妆 / 个护清洁 / 宠物</a> <div class="sub-container">666</div> </li> <li> <a href="#">女装 / 箱包 / 钟表 / 珠宝</a> <div class="sub-container">777</div> </li> <li> <a href="#">男鞋 / 运动 / 户外</a> <div class="sub-container">888</div> </li> <li> <a href="#">房产 / 汽车 / 汽车用品</a> <div class="sub-container">999</div> </li> <li> <a href="#">母婴 / 玩具乐器</a> <div class="sub-container">aaa</div> </li> <li> <a href="#">食品 / 酒类 / 生鲜 / 特产</a> <div class="sub-container">bbb</div> </li> <li> <a href="#">艺术 / 礼品鲜花 / 农资绿植</a> <div class="sub-container">ccc</div> </li> <li> <a href="#">医药保健 / 计生情趣</a> <div class="sub-container">ddd</div> </li> <li> <a href="#">图书 / 文娱 / 教育 / 电子书</a> <div class="sub-container">eee</div> </li> <li> <a href="#">机票 / 酒店 / 旅游 / 生活</a> <div class="sub-container">fff</div> </li> <li> <a href="#">理财 / 众筹 / 白条 / 保险</a> <div class="sub-container">ggg</div> </li> <li> <a href="#">安装 / 维修 / 清洗 / 二手</a> <div class="sub-container">hhh</div> </li> <li> <a href="#">工业品</a> <div class="sub-container">iii</div> </li> </ul> </body> </html> 显示: ![在这里插入图片描述][20210103171018619.gif_pic_left] [20210103171018619.gif_pic_left]: /images/20221120/265db9adf30a4fa1a3db9baaa6be0dcc.png
还没有评论,来说两句吧...