<nav> <a id="menu-toggle" href="javascript:void(0);">☰</a> <ul> <li><a href="http://mozilla.com.tw/firefox/">Firefox</a></li> <li><a href="http://mozilla.com.tw/firefox/os/">Firefox OS</a></li> <li><a href="http://mozilla.com.tw/community/">社群參與</a></li> <li><a href="http://mozilla.com.tw/news/">訊息中心</a></li> <li><a href="http://mozilla.com.tw/about/">參與我們</a></li> </ul> </nav> <article> <p> </p> <p> </p> <p> </p> <p>我是內文</p> <p> </p> <p> </p> <p> </p> </article>
body { text-align: center; } a { color: #888888; text-decoration: none; } nav { display: inline-block; vertical-align: top; text-align: left; } nav ul { margin: 0; padding: 0; background: #CCFFCC; } nav ul li { list-style-type: none; padding: 6px 12px; border-bottom: 1px solid #FFF; } nav ul li:hover { background: #88CC88; } nav ul li:hover a { color: #FFF; } article { display: inline-block; width: 280px; background: #FFFFCC; vertical-align: top; } #menu-toggle { position: fixed; width: 30px; height: 30px; display: none; background: #CCFFCC; text-align: center; line-height: 30px; vertical-align: middle; } @media only screen and (max-width: 400px) { nav { position: fixed; } nav > ul { display: none; } #menu-toggle { display: block; } nav:hover > ul { display: block; margin-top: 30px; } }