纯CSS制作的响应式折叠菜单分享

这个菜单能居左、居中和居右对齐，不像之前文章提到的菜单需要靠点击在显示和隐藏之间进行切换。它也有一个标记显示激活/当前菜单项，并且它能作用在所有移动平台和包括IE在内的所有桌面浏览器。

首先，看看Demo的效果：Demo
一、 目的

本教程的目的是展示如何将规律的列表菜单变成一个较小的显示下拉菜单。

这个技巧在由许多链接组成的导航上非常有用，例如下面的截图，可以将所有按钮压缩成一个优雅的下拉。

二、Nav HTML标记

XML/HTML Code复制内容到剪贴板

<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

CSS Code复制内容到剪贴板

/* nav */  
.nav {   
    position: relative;   
    margin: 20px 0;   
}   
.nav ul {   
    margin: 0;   
    padding: 0;   
}   
.nav li {   
    margin: 0 5px 10px 0;   
    padding: 0;   
    list-style: none;   
    display: inline-block;   
}   
.nav a {   
    padding: 3px 12px;   
    text-decoration: none;   
    color: #999;   
    line-height: 100%;   
}   
.nav a:hover {   
    color: #000;