前言：本人是新生小白，如有错误之处欢迎指出
模仿美团网页（侧边栏），写的一个网页，侧边栏主要通过HTML+CSS完成，用hover实现菜单栏的影藏与显示，写的很菜，如有错误欢迎指出侧边栏
HTML部分
<body><div class="head"><div class="header"><span>全部分类</span></div><ul id="main"><li><img src="./img/1.png" alt=""><a href="http:/123">美食</a><i class="icon"></i></li><li><img src="./img/4.png" alt=""><a href="http:/123">外卖</a><i class="icon"></i></li><li><img src="./img/5.png" alt=""><a href="http:/123">酒店</a><span>HOT</span><i class="icon"></i></li><li><img src="./img/6.png" alt=""><a href="http:/123">民宿</a><i class="icon"></i></li><li><img src="./img/3.png" alt=""><a href="http:/123">猫眼电影</a><i class="icon"></i></li><li><img src="./img/7.png" alt=""><a href="http:/123">机票 / 火车票</a><i class="icon"></i></li><li><img src="./img/8.png" alt=""><a href="http:/123">休闲娱乐 / KTV</a><i class="icon"></i></li><li><img src="./img/9.png" alt=""><a href="http:/123">生活服务</a><i class="icon"></i></li><li><img src="./img/10.png" alt=""><a href="http:/123">丽人 / 美发 / 医学美容</a><i class="icon"></i></li><li><img src="./img/11.png" alt=""><a href="http:/123">结婚 / 婚纱摄影 / 婚宴</a><i class="icon"></i></li><li><img src="./img/12.png" alt=""><a href="http:/123">亲子 / 儿童乐园 / 幼教</a><i class="icon"></i></li><li><img src="./img/13.png" alt=""><a href="http:/123">运动健身 / 健身中心</a><i class="icon"></i></li><li><img src="./img/14.png" alt=""><a href="http:/123">家装 / 建材 / 家居</a><i class="icon"></i></li><li><img src="./img/15.png" alt=""><a href="http:/123">学习培训 / 音乐培训</a><i class="icon"></i></li><li><img src="./img/16.png" alt=""><a href="http:/123">医疗健康 / 宠物 / 爱车</a><i class="icon"></i></li><li><img src="./img/17.png" alt=""><a href="http:/123">酒吧 / 密室逃脱</a><i class="icon"></i></li></ul></div></body>
CSS部分
<style>body{width: 228px;}* {margin: 0;padding: 0;}a{text-decoration: none;}.head{width: 228px;height: auto;}.header{width: 228px;height: 55px;background-color: antiquewhite;font-weight: 600;}.header>span{font-size: 16px;color: black;margin-left: 16px;display: block;padding-top: 15px;}#main>li{padding: 2px 12px;width: 204px;height: 25px;position: relative;}#main>li:hover{background-color: rgb(236, 203, 144);font-weight: 400;}#main>li>img {width: 20px;height: 20px;}#main>li>a:link{font-size: 13px;font-family: 微软雅黑;vertical-align: middle;padding-left: 6px;position: relative;top: -5px;height: 16px;color: #646464;}.icon{display: inline-block;width: 16px;height: 16px;background-image: url(./img/2.png);background-size: 20px 20px;background-repeat: no-repeat;line-height: 16px;position: absolute;right: 10px;top: -3px; }#main>li>a:hover{font-weight: 600;}#main>li:nth-child(3)>span{background-color: blueviolet;font-size: 13px;text-align: center;font-family: 微软雅黑;border-top-left-radius: 1em;border-top-right-radius: 1em;border-bottom-left-radius: 1em;border-bottom-right-radius: 1em;display: block;width: 35px;margin-left: 5px;margin-bottom: 5px;position: absolute;left: 65px;top: 5px;}#main>li:nth-child(3)>span:hover{background-color: tomato;}#main{background-color: aquamarine;}</style>
！！！图片素材这里不便发送，如有需要可私信
由于本人最近遇到了一些很严峻的困难，文章质量有所下降，还请见谅
