一个非常简单简洁的自适应导航栏

<div class="nav">     <span class="nav-on"><i></i><i></i><i></i></span>     <ul>         <li><a href="#">首页</a></li>         <li><a href="#">栏目一</a></li>         <li><a href="#">栏目二</a></li>     </ul> </div>

$(".nav-on").click(function() {     $(".nav > ul").slideToggle(); });

.nav {     line-height: 50px;     background: #0099cc;     position: relative; }  .nav li {     float: left; }  .nav li a {     display: block;     padding: 0 20px;     color: #fff; }  .nav span.nav-on {     display: none;     width: 20px;     position: absolute;     top: 12px;     right: 12px;     cursor: pointer; }  .nav-on i {     display: block;     width: 100%;     height: 5px;     background: #fff;     margin-bottom: 5px; }  /* 手机端CSS代码 */ @media screen and (max-width: 768px) {     .nav ul {         display: none;         width: 100%;     }      .nav ul li {         width: 100%;     }      .nav span.nav-on {         display: block;     } }