<nav> <a id="menu-toggle" href="javascript:void(0);">☰</a> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </nav> <article> <p> </p> <p>內文</p> <p> </p> </article>
body { text-align: center; } a { color: #888888; text-decoration: none; } nav { display: inline-block; text-align: left; vertical-align: top; } nav ul { background: #CCFFCC; margin: 0; padding: 0; } nav ul li { border-bottom: 1px solid #FFF; list-style-type: none; padding: 6px 12px; } nav ul li:hover { background: #88CC88; } nav ul li:hover a { color: #FFF; } article { background: #FFFFCC; display: inline-block; vertical-align: top; width: 280px; } #menu-toggle { background: #CCFFCC; display: none; height: 30px; line-height: 30px; position: fixed; text-align: center; vertical-align: middle; width: 30px; } @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; } }