<!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>以上就是 短视频商城源码，商城左侧菜单栏网页模板更多内容欢迎关注之后的文章
