css类似于小米官网的二级导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.lunbo-fl {
position: absolute;
top: 0;
left: 0;
width: 230px;
background: rgba(0, 0, 0, 0.3);
height: 457.14px;
}
.lunbo-nr {
text-align: center;
color: #fff;
line-height: 41px;
}
.lunbo-nr>div {
cursor: pointer;
overflow: hidden;
padding: 2.5px 8px;
}
.lunbo-nr span {
float: left;
}
.lunbo-nr>div>span:nth-child(2) {
float: right;
font-size: 24px;
}
.yc {
position: absolute;
top: 0;
left: 230px;
width: 300px;
height: 456.73px;
background-color: #fff;
color: #000;
display: none;
border-top: 1px solid #B0B0B0;
box-shadow: 0 5px 20px #A9A9A9;
}
.yc>span {
display: block;
}
.lunbo-nr>div:hover>.yc {
display: block;
}
.lunbo-nr>div:hover {
background-color: darkgoldenrod;
}
</style>
//css
<body>
//html
<div class="lunbo-fl">
<div class="lunbo-nr">
<div class="fl1"><span>手机 电话卡</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl2"><span>笔记本</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl3"><span>电视 盒子</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl4"><span>路由器 智能硬件</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl5"><span>移动电源 电池 插线板</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl6"><span>耳机 音响</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl7"><span>保护套 贴膜</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl8"><span>线材 支架 储存卡</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl9"><span>箱包 服饰 鞋 眼镜</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
<div class="fl10"><span>米兔 周边生活</span><span>></span>
<div class="yc">
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
<p>kjjkl,</p>
</div>
</div>
</div>
</div>
</body>
</html>
也许做的不完美，请多包含。
浙公网安备 33010602011771号