以下是一个简单实例，可以通过学习了解响应工菜单的制作。

html

<nav class="nav"> <ul> <li class="current"><a href="#">Portfolio</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Print Media</a></li> <li><a href="#">Graphic Design</a></li> </ul> </nav>

css

.nav { position: relative; margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav ul li { margin: 0 5px 10px 0; padding: 0; list-style: none; float: left; } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; } .nav.right ul { text-align: right; } .nav.center ul { text-align: center; }

页面小于600显示成一列

@media (max-width: 600px) { .nav { position: relative; min-height: 30px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; margin: 0; } .nav .current { display: block; } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } .nav.right ul { left: auto; right: 0; } .nav.center ul { left: 50%; margin-left: -90px; } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。