分享一款纯CSS3响应式导航，无需引入jQuery

纯CSS3响应式导航，可以根据自己的需求修改代码，改变窗口查看响应式效果

HTML代码：

<div class="tpt-header">
<div class="tpt-logo"><a href="/"><img src="https://tpt360.com/tuimg/css.png"></a></div>
<input id="nav-btn" type="checkbox">
<label class="tpt-nav-btn" for="nav-btn"></label>
<ul class="tpt-nav">
<li>
<a class="tpt-nav-li" href="#">网站首页</a>
<ul class="tpt-nav-ul"></ul>
</li>
<li>
<input id="nav-2" type="checkbox"><label class="tpt-nav-li" for="nav-2">新闻资讯</label>
<ul class="tpt-nav-ul">
<li><a href="#">国内新闻</a></li><li><a href="#">国际新闻</a></li></ul>
</li>
<li>
<input id="nav-3" type="checkbox"><label class="tpt-nav-li" for="nav-3">科技头条</label>
<ul class="tpt-nav-ul">
<li><a href="#">人工智能</a></li><li><a href="#">虚拟现实</a></li></ul>
</li>
</ul>
</div>

CSS代码：

.tpt-header{background:#2a303c;width:100%;height:65px;position:relative;z-index:999;left:0;top:0}
.tpt-header .tpt-logo{float:left;line-height:65px}
.tpt-header .tpt-logo img{vertical-align:middle;margin:0 0 0 20px}
.tpt-header input{position:absolute;opacity:0;z-index:-1}
.tpt-nav{float:right;padding:0 30px}
.tpt-nav li{position:relative;float:left}
.tpt-nav .tpt-nav-li{position:relative;float:left;text-align:center;color:#fff;font-size:14px;cursor:pointer;padding:0 30px;height:65px;line-height:65px}
.tpt-nav label::after{position:absolute;right:0;top:0;color:#fff;content:"\25BC";-webkit-transition:all .35s;transition:all .35s}
.tpt-nav :hover+label::after{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}
.tpt-nav :hover .tpt-nav-ul{display:block}
.tpt-nav .tpt-nav-ul{display:none;position:absolute;left:0;top:61px;box-shadow:0 2px 4px rgba(0,0,0,.12);border-top:4px solid #FF5722;min-width:100%}
.tpt-nav .tpt-nav-ul li{background:#fff;height:40px;line-height:40px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpt-nav .tpt-nav-ul li a{display:block;color:#2a303c;font-size:14px;padding:0 20px;text-align:center}
.tpt-nav .tpt-nav-ul li a:hover{background:#f2f2f2}
@media only screen and (max-width:1023px){.tpt-header{background:#202124;height:55px}
.tpt-header .tpt-nav-btn::after{position:absolute;right:7px;top:50%;margin-top:-12px;width:27px;text-align:center;cursor:pointer;content:url(https://tpt360.com/tuimg/ts.png)}
.tpt-header .tpt-nav{max-height:0;overflow:hidden}
.tpt-header input:checked~.tpt-nav{max-height:1000px}
.tpt-header .tpt-logo{float:none;width:100%;line-height:55px}
.tpt-nav{width:100%;padding:0;position:absolute}
.tpt-nav li{position:static;float:none}
.tpt-nav .tpt-nav-li{float:none;display:block;text-align:left;background:#16171A;color:#fff;height:55px;line-height:55px;padding:0 20px}
.tpt-nav label::after{right:13px}
.tpt-nav :hover+label::after{-webkit-transform:rotateX(0);transform:rotateX(0)}
.tpt-nav .tpt-nav-ul{max-height:0;overflow:hidden;display:block;position:relative;left:0;top:0;box-shadow:none;border:none}
.tpt-nav .tpt-nav-ul li{background:#16171A;height:50px;line-height:50px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpt-nav .tpt-nav-ul li a{color:#fff;font-size:14px;text-align:left}
.tpt-nav input:checked~.tpt-nav-ul{max-height:1000px}
.tpt-nav input[type=checkbox]:checked+label::after{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}
.tpt-nav .tpt-nav-ul li a:hover,.tpt-nav input[type=checkbox]:checked+label,.tpt-nav label:hover,.tpt-nav li a:hover{background:#202124}
}