商城左侧菜单栏网页模板

https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

哈哈哈直接上代码趴！

商城左侧菜单栏网页模板编辑如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.wrapper{width: 1200px;height:500px;background-color: green;margin: 0 auto;  /* 居中 */position: relative;    /* 子绝父相 */}.rightbox{width: 1000px;height: 500px;background-color: slateblue;position: absolute;right: 0;top:0;}.leftbox{width: 200px;height: 500px;background-color: #eee;}.leftbox ul{list-style: none;}.leftbox ul li{height: 30px;line-height: 30px;}.leftbox a{text-decoration: none;color: #323232;}.leftbox{color:#323232;}.leftbox li p{width:180px;height: 30px;padding-left: 20px;}.leftbox li:hover p{width:180px;height: 30px;border: solid 1px blue;padding-left: 20px;border-right:0;position: relative;z-index: 2; /* 这个也就相当于是权重的意思 */background-color: #eee;}.submenu{width:998px;height:498px;background-color:#eee;border: solid 1px blue;position: absolute;top: 0;left: 200px;z-index: 1;display: none;}.leftbox li:hover div.submenu{display: block;  /* 块级元素 */}</style></head><body><div class="wrapper"><div class="leftbox"><ul><li><p><a href="">周杰伦</a>/<a href="">昆凌</a> </p><div class="submenu"><img src="img/J.jpg"/></div></li><li><p><a href="">电子书</a>/<a href="">网络文学</a></p><div class="submenu"><img src="img/p2.png"/></div></li><li><p><a href=""></a>/<a href="">拍卖</a>/<a href="">电子书</a> </p><div class="submenu">333</div></li><li><p><a href="">服饰</a>/<a href="">内衣</a> </p><div class="submenu">4444</div></li><li><p><a href="">鞋靴</a>/<a href="">箱包</a> </p><div class="submenu">5555</div></li><li><p><a href="">运动</a>/<a href="">户外</a> </p><div class="submenu">666</div></li><li><p><a href="">孕</a>/<a href="">婴</a>/<a href="">童</a> </p><div class="submenu">7777</div></li><li><p><a href="">家居</a>/<a href="">家纺</a>/<a href="">汽车</a> </p><div class="submenu">8888</div></li></ul></div><div class="rightbox"></div></div></body>
</html>