一款CSS3实现多功能下拉菜单（带分享按）的教程

　　今天要分享的这款菜单是基于CSS3的下拉菜单，功能非常强大，下拉菜单中不仅拥有背景色渐变的菜单项，而且还带有分享按钮的菜单项，为了让菜单更加美观，每一个菜单项都带有非常漂亮的小图标，而且在下拉菜单中还有鼠标滑过缩进的动画特效。

　　接下来我们来具体解说一下实现这款CSS3下拉菜单原理和过程，代码主要是HTML和CSS。

　　首先是HTML代码，主要是两部分，左侧的下拉菜单项和右侧的分享按钮菜单，分别用了一个ul li列表：

　　HTML代码:

1. <ul class=”menu-function”>  
2. <li>  
3. <a href=”" title=”">CATEGORIES</a>  
4. <ul class=”dropdown-menu categories”>  
5. <li><a href=”" title=”">Design</a></li>  
6. <li><a href=”" title=”">Freebies</a></li>  
7. <li><a href=”" title=”">Tutorials</a></li>  
8. <li><a href=”" title=”">Coding</a></li>  
9. <li><a href=”" title=”">Inspiration</a></li>  
10. <li><a href=”" title=”">WordPress</a></li>  
11. <li><a href=”" title=”">Resources</a></li>  
12. </ul>  
13. </li>  
14. <li><a href=”" title=”">SHOP</a></li>  
15. <li id=”search”>  
16. <a href=”#search” title=”">SEARCH</a>  
17. </li>  
18. <li id=”search-hidden”>  
19. <<