「原创」简易滑动栏目（Jquery版与纯CSS版）
一、Jquery版本
<script>
$(document).ready(function(){
$("menu ul").hide();
$("menu nav").click(function(){
var index=$("menu nav").index(this);
$("menu ul:eq("+index+")").slideToggle();
});
})
</script>
<style>
*{margin:0;padding:0;list-style:none;}
.mymenu{font-size: 2em;line-height: 2em;cursor:pointer;}
.mymenu nav{width: 100%;background: #fff000;}
.mymenu ul li{width: 100%;background: #f4f4f4; transition: 1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}
.mymenu ul li:hover{background: #ccc;}
</style>
<menu class="mymenu">
<nav>一级栏目1</nav>
<ul>
<li>二级栏目1</li>
<li>二级栏目2</li>
<li>二级栏目3</li>
<li>二级栏目4</li>
</ul>
<nav >一级栏目2</nav>
<ul>
<li>二级栏目5</li>
<li>二级栏目6</li>
<li>二级栏目7</li>
<li>二级栏目8</li>
<li>二级栏目7</li>
<li>二级栏目8</li>
</ul>
<nav>一级栏目3</nav>
<ul>
<li>二级栏目53</li>
<li>二级栏目63</li>
<li>二级栏目73</li>
<li>二级栏目83</li>
</ul>
</menu>
二、纯CSS版本
<style>
*{padding:0;margin:0;}
html,body{font-size:1em;}
.mymenu{font-size:2em;line-height:2em;list-style:none;cursor:pointer;}
.mymenu li{width:100%;background:#fff000;outline:none;}
.mymenu li nav{height:0;width:100%;transition:1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}
.mymenu li nav li{display:none;width:100%;background:#f4f4f4;transition:1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}
.mymenu li:focus nav{height:8em;}
.mymenu li:focus nav li{display: block;}
.mymenu li:focus nav li:hover{background: #ccc;}
</style>
<menu class="mymenu">
<li tabindex='1'>一级栏目1
<nav>
<li>二级栏目1</li>
<li>二级栏目2</li>
<li>二级栏目3</li>
<li>二级栏目4</li>
</nav>
</li>
<li tabindex='2'>一级栏目2
<nav>
<li>二级栏目5</li>
<li>二级栏目6</li>
<li>二级栏目7</li>
<li>二级栏目8</li>
</nav>
</li>
<li tabindex='3'>一级栏目3
<nav>
<li>二级栏目53</li>
<li>二级栏目63</li>
<li>二级栏目73</li>
<li>二级栏目83</li>
</nav>
</li>
</menu>