以下是一个简单实例，可以通过学习了解响应工菜单的制作。
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; } /* right nav */ .nav.right ul { text-align: right; } /* center nav */ .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; /* hide all <li> items */ margin: 0; } .nav .current { display: block; /* show only current <li> item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* on nav hover */ .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; } /* right nav */ .nav.right ul { left: auto; right: 0; } /* center nav */ .nav.center ul { left: 50%; margin-left: -90px; } }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
用css3实现弹幕效果
你不知道的冷门css属性
css定制文本省略的方法
以上就是css实现自适应导航菜单的详细内容。