Toolbar Menu 菜单

先上图看效果，简洁大气，经常会用的到的

HTML Code：

<div class="page-menu-wrapper clearfix">

　　<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> 

</div>

 CSS Code：

body {

	background-color: #F6F8F8;

}

a {

	color: #fff;

}

a:hover {

	color: #3d61a2;

	text-decoration: none;

}

.demo {

	margin-top: 40px;

	min-height: 300px;

}

.page-menu-wrapper {

	width: 960px;

	line-height: 45px;

	margin: 0 auto;

	background-color: #446cb3;

}

.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: right;

}

.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: right;

	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;	

	right: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;

}

 最后附上下载包：toolBarMenu.rar