源代码：
</div><div>/*</div><div> General cleanup</div><div>*/</div><div>*,</div><div>*:before,</div><div>*:after {</div><div> -webkit-box-sizing: border-box;</div><div> box-sizing: border-box;</div><div>}</div><div>html,</div><div>body {</div><div> font-family: helvetica, arial, sans-serif;</div><div> font-size: 18px;</div><div> margin: 0;</div><div> padding: 0;</div><div>}</div><div>nav ul,</div><div>nav ol {</div><div> list-style: none;</div><div> padding: 0;</div><div> margin: 0;</div><div>}</div><div>.sr-only {</div><div> position: absolute;</div><div> clip: rect(1px, 1px, 1px, 1px);</div><div> font-size: 1px;</div><div>}</div><div>/*</div><div> Demo</div><div>*/</div><div>.show-nav {</div><div> position: fixed;</div><div> top: 0;</div><div> right: 0;</div><div>}</div><div>.nav__list {</div><div> background: #fafafa;</div><div> border-bottom: 1px solid #444;</div><div> text-align: center;</div><div> position: relative;</div><div> z-index: 2;</div><div>}</div><div>.nav__list > li {</div><div> display: inline-block;</div><div>}</div><div>.nav__list a {</div><div> display: block;</div><div> padding: 20px;</div><div> position: relative;</div><div> z-index: 2;</div><div>}</div><div>.nav__list a:hover,</div><div>.nav__list a:focus {</div><div> background: #222;</div><div> color: #fff;</div><div>}</div><div>.has-drop {</div><div> position: relative;</div><div>}</div><div>.nav__list__drop {</div><div> left: 0;</div><div> margin: 0;</div><div> position: absolute;</div><div> text-align: left;</div><div> top: 100%;</div><div> opacity: 0;</div><div> -webkit-transform: translateY(-20px);</div><div> transform: translateY(-20px);</div><div> height: 1px;</div><div> -webkit-transition: opacity .1s ease-out, -webkit-transform .2s ease-in-out;</div><div> transition: opacity .1s ease-out, -webkit-transform .2s ease-in-out;</div><div> transition: transform .2s ease-in-out, opacity .1s ease-out;</div><div> transition: transform .2s ease-in-out, opacity .1s ease-out, -webkit-transform .2s ease-in-out;</div><div> overflow: hidden;</div><div> z-index: 1;</div><div>}</div><div>.nav__list__drop {</div><div> background: #fafafa;</div><div> border: 1px solid #444;</div><div> border-top: 0;</div><div> min-width: 100%;</div><div>}</div><div>.nav__list__drop a {</div><div> padding: 12px 20px;</div><div> white-space: nowrap;</div><div>}</div><div>.nav__list a:focus + .nav__list__drop,</div><div>.has-drop:hover .nav__list__drop,</div><div>.nav__list__drop:focus-within {</div><div> opacity: 1;</div><div> -webkit-transform: translateY(0px);</div><div> transform: translateY(0px);</div><div> height: auto;</div><div> z-index: 1;</div><div>}</div><div>/*</div><div> 1. This right here, the :focus-within pseudo-class</div><div> removes the need for all the JS that was in the</div><div> original version of this pen, to reveal the</div><div> dropdown menus on keyboard focus of the primary <a></div><div> or any of the visually hidden <a>s of the drop down</div><div> menus.</div><div>*/</div><div>
最后的效果：
