今天要分享的这款菜单是基于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> <li><a href=”" title=”">Google+</a></li> <li><a href=”" title=”">Dribbble</a></li> </ul> </li> <li> <a href=”" title=”">SHARE</a> <ul class=”dropdown-menu share”> <li><a href=”" title=”">Facebook</a></li> <li><a href=”" title=”">Twitter</a></li> <li><a href=”" title=”">Google+</a></li> </ul> </li> </ul>这个ul结构支撑了下拉菜单的基本骨架，应该还算普通。
接下来是CSS3代码，是实现这款CSS3下拉菜单的关键：
CSS3代码:
CSS Code复制内容到剪贴板 .page-menu-wrapper > ul > li { position: relative; float: left; border-left: 1px solid #3d61a2; border-right: 1px solid #3d61a2; margin-right: -1px; } .menu-function { float: left; } .menu-share { float: rightright; } .page-menu-wrapper > .menu-function > li:first-child { border-left: none; } .page-menu-wrapper > .menu-share > li:last-child { border-right: none; } .page-menu-wrapper a { position: relative; display: block; padding: 0 15px; transition: all .3s ease-out; } .page-menu-wrapper > ul > li:hover > a { color: #3d61a2; background-color: #fff; } .page-menu-wrapper > ul > li:hover .dropdown-menu { display: block; } .dropdown-menu { display: none; position: absolute; width: 260px; font-size: 18px; font-weight: bold; text-align: left; background-color: #fff; } .dropdown-menu.categories a { color: #000; } .dropdown-menu.categories a:hover { color: #5bc4be; margin-left: 10px; } #search:target a[href="#search"] { display: none; } #search:target ~ #search-hidden { display: block; } #search-hidden { display: none; padding: 0 5px; background-color: #fff; } #search-hidden input { border: none; line-height: 24px; width: 180px; } #search-hidden a { float: rightright; padding: 0; width: 20px; height: 45px; } #search-hidden a:before { content: “7d”; left: 0; color: #446cb3; } .menu-function > li > a,.menu-share > li > a { padding-left: 40px; } .page-menu-wrapper a:before { position: absolute; left: 15px; font-family: ‘icomoon’; font-style: normal; speak: none; font-weight: normal; font-smoothing: antialiased; font-size: 18px; vertical-align: middle; } .menu-function > li:nth-child(1) > a:before { content: “e048″; } .menu-function > li:nth-child(2) > a:before { content: “3b”; } .menu-function > li:nth-child(3) > a:before { content: “7d”; } .menu-share > li:nth-child(1) > a:before { content: “e0a2″; } .menu-share > li:nth-child(2) > a:before { content: “e05b”; } /*follow*/ .dropdown-menu.follow { width: 223px; } .dropdown-menu.follow a { padding-left: 35px; font-size: 14px; } .dropdown-menu.follow a:before { left: 10px; } .dropdown-menu.follow li:nth-child(1) a:before { content: “e0a5″; } .dropdown-menu.follow li:nth-child(2) a:before { content: “e0a2″; } .dropdown-menu.follow li:nth-child(3) a:before { content: “e04c”; } .dropdown-menu.follow li:nth-child(4) a:before { content: “e022″; } .dropdown-menu.follow li:nth-child(5) a:before { content: “e03d”; } .dropdown-menu.follow li:nth-child(1) a { color: #ffaa31; } .dropdown-menu.follow li:nth-child(2) a { color: #07beed; } .dropdown-menu.follow li:nth-child(3) a { color: #314d91; } .dropdown-menu.follow li:nth-child(4) a { color: #2d2d2d; } .dropdown-menu.follow li:nth-child(5) a { color: #e84788; } .dropdown-menu.follow li:nth-child(1):hover { background-color: #ffaa31; } .dropdown-menu.follow li:nth-child(2):hover { background-color: #07beed; } .dropdown-menu.follow li:nth-child(3):hover { background-color: #314d91; } .dropdown-menu.follow li:nth-child(4):hover { background-color: #2d2d2d; } .dropdown-menu.follow li:nth-child(5):hover { background-color: #e84788; } .dropdown-menu.follow li:hover a { color: #fff; margin-left: 10px; } .dropdown-menu.share { width: 120px; rightright:0; } .dropdown-menu.share a { margin: 10px; line-height: 26px; font-size: 12px; padding-left: 20px; border: 1px solid #cbcbcb; border-radius: 2px; color: #4c4c4c; background-color: #efefef; } .dropdown-menu.share a:hover { background-color: #fff; } .dropdown-menu.share li a:before { font-size: 12px; left: 5px; } .dropdown-menu.share li:nth-child(1) a:before { content: “e04c”; color: #314d91; } .dropdown-menu.share li:nth-child(2) a:before { content: “e0a2″; color: #07beed; } .dropdown-menu.share li:nth-child(3) a:before { content: “e022″; color: #2d2d2d; } @font-face { font-family: ‘icomoon’; src:url(‘fonts/icomoon.eot’); src:url(‘fonts/icomoon.eot?#iefix’) format(‘embedded-opentype’), url(‘fonts/icomoon.svg#icomoon’) format(‘svg’), url(‘fonts/icomoon.woff’) format(‘woff’), url(‘fonts/icomoon.ttf’) format(‘truetype’); font-weight: normal; font-style: normal; }这个代码比较复杂，建议下载源码研究。谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。
