今天要分享的这款菜单是基于CSS3的下拉菜单，功能非常强大，下拉菜单中不仅拥有背景色渐变的菜单项，而且还带有分享按钮的菜单项，为了让菜单更加美观，每一个菜单项都带有非常漂亮的小图标，而且在下拉菜单中还有鼠标滑过缩进的动画特效。
接下来我们来具体解说一下实现这款CSS3下拉菜单原理和过程，代码主要是HTML和CSS。
首先是HTML代码，主要是两部分，左侧的下拉菜单项和右侧的分享按钮菜单，分别用了一个ul li列表：
HTML代码:
XML/HTML Code复制内容到剪贴板
<ul class=”menu-function”>
<li>
<a href=”" title=”">CATEGORIES</a>
<ul class=”dropdown-menu categories”>
<li><a href=”" title=”">Design</a></li>
<li><a href=”" title=”">Freebies</a></li>
<li><a href=”" title=”">Tutorials</a></li>
<li><a href=”" title=”">Coding</a></li>
<li><a href=”" title=”">Inspiration</a></li>
<li><a href=”" title=”">WordPress</a></li>
<li><a href=”" title=”">Resources</a></li>
</ul>
</li>
<li><a href=”" title=”">SHOP</a></li>
<li id=”search”>
<a href=”#search” title=”">SEARCH</a>
</li>
<li id=”search-hidden”>
<input type=”text” name=”" id=”"><a href=”#search-hidden” title=”"></a>
</li>
</ul>
<ul class=”menu-share”>
<li>
<a href=”" title=”">FOLLOW US</a>
<ul class=”dropdown-menu follow”>
<li><a href=”" title=”">RSS</a></li>
<li><a href=”" title=”">Twitter</a></li>
<li><a href=”" title=”">Facebook</a></li>
