超酷炫 CSS3垂直手风琴菜单

  <div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div>  

  <ul class="submenu">  

   <li><a href="#">Tablets</a></li>  

   <li><a href="#">Dispositivos mobiles</a></li>  

   <li><a href="#">Medios de escritorio</a></li>  

   <li><a href="#">Otros dispositivos</a></li>  

  </ul>  

 </li>  

 <li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>  

  <ul class="submenu">  

   <li><a href="#">Google</a></li>  

   <li><a href="#">Bing</a></li>  

   <li><a href="#">Yahoo</a></li>  

   <li><a href="#">Otros buscadores</a></li>  

  </ul>  

 </li>  

</ul>  

CSS代码：

CSS Code复制内容到剪贴板

 .accordion {   

  width: 100%;   

  max-width: 360px;   

  margin: 30px auto 20px;   

  background: #FFF;   

  -webkit-border-radius: 4px;   

  -moz-border-radius: 4px;   

  border-radius: 4px;   

 }   

.accordion .link {   

 cursor: pointer;   

 display: block;   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!