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>手机&nbsp;电话卡</span><span>&gt;</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>&gt;</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>电视&nbsp;盒子</span><span>&gt;</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>路由器&nbsp;智能硬件</span><span>&gt;</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>移动电源&nbsp;电池&nbsp;插线板</span><span>&gt;</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>耳机&nbsp;音响</span><span>&gt;</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>保护套&nbsp;贴膜</span><span>&gt;</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>线材&nbsp;支架&nbsp;&nbsp;储存卡</span><span>&gt;</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>箱包&nbsp;服饰&nbsp;鞋&nbsp;眼镜</span><span>&gt;</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>米兔&nbsp;周边生活</span><span>&gt;</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>

也许做的不完美,请多包含。

posted on 2017-12-14 20:40  Jonne  阅读(192)  评论(0)    收藏  举报

导航