code is as follows:


<Div class="page - the menu - wrapper clearfix" >
<Ul class="menu - function >"
<LI> <A href="" title=" "> CATEGORIES
<Ul class="dropdown can - menu categories" >
<LI> <A href="" title=" "> Design </LI>
<LI> <A href="" title=" "> Freebies </LI>
<LI> <A href="" title=" "> Tutorials </LI>
<LI> <A href="" title=" "> Coding </LI>
<LI> <A href="" title=" "> Inspiration </LI>
<LI> <A href="" title=" "> WordPress </LI>
<LI> <A href="" title=" "> Resources </LI>
</ul>
</LI>
<LI> <A href="" title=" "> SHOP </LI>
<Li id="search" > <A href="http://www.jb51.net//css/#search" title="" > SEARCH </LI>
<Li id="search - hidden" > <Input type="text" name="" id=" "> <A href="http://www.jb51.net//css/#search-hidden" title="" > </a> </LI>
</ul>
<Ul class="menu - share" >
<LI> <A href="" title=" "> FOLLOW US
<Ul class="dropdown can - menu follow >"
<LI> <A href="" title=" "> RSS </LI>
<LI> <A href="" title=" "> Twitter </LI>
<LI> <A href="" title=" "> Facebook </LI>
<LI> <A href="" title=" "> Google + </a> </LI>
<LI> <A href="" title=" "> Dribbble </LI>
</ul>
</LI>
<LI> <A href="" title=" "> SHARE
<Ul class="dropdown can - menu share" >
<LI> <A href="" title=" "> Facebook </LI>
<LI> <A href="" title=" "> Twitter </LI>
<LI> <A href="" title=" "> Google + </a> </LI>
</ul>
</LI>
</ul>
</div> </p><P> The CSS Code:
?
body {
background - color: # F6F8F8;

} {a
color: # FFF;
}
a: hover {
color: # 3 d61a2;
text - decoration: none;

} demo {
margin - top: 40 px;
min - height: 300 px;
}
page - the menu - wrapper {
width: 960 px;
the line - height: 45 px;
margin: 0 auto;
background - color: # 446 cb3;
}
page - the menu - wrapper > Ul > Li {
position: relative;
float: left;
border - left: 1 px solid # 3 d61a2;
border - right: 1 px solid # 3 d61a2;
margin - right: - 1 px;

}. The menu - the function {
float: left;

}. The menu - share {
float: right;
}
page - the menu - wrapper > . The menu - the function > Li: first - child {
border - left: none;
}
page - the menu - wrapper > . The menu - share > Li: last - child {
border - right: none;
}
page - the menu - wrapper a {
position: relative;
display: block;
the padding: 0 px;
the transition: all 3 s ease - out;
}
page - the menu - wrapper > Ul > Li: hover > A {
color: # 3 d61a2;
background - color: # FFF;
}
page - the menu - wrapper > Ul > Li: hover. The dropdown can - menu {
display: block;

}. The dropdown can - menu {
display: none;
position: absolute;
width: 260 px;
the font - size: 18 px;
the font - weight: bold;
text - align: left;
background - color: # FFF;

}. The dropdown can - menu. Categories a {
color: # 000;

}. The dropdown can - menu. Category a: hover {
color: # 5 bc4be;
margin - left: 10 px;

} # search: target a href="http://www.jb51.net//css/#search"] {
display: none;

} # search: target ~ # search - hidden {
display: block;

} # search - hidden {
display: none;
the padding: 0 px;
background - color: # FFF;

} # search - hidden input {
border: none;
the line - height: 24 px;
width: 180 px;

} # search - hidden a {
float: right;
the padding: 0;
width: 20 px;
height: 45 px;

} # search - hidden a: before {
the content: "7 d ";
left: 0;
color: # 446 cb3;

}. The menu - the function > Li > A,. The menu - share > Li > A {
padding - left: 40 px;
}
page - the menu - wrapper a: before {
position: absolute;
left: 15 px;
the font-family: 'icomoon';
the font - style: normal;
speak: none;
the font - weight: normal;
the font - smoothing: antialiased;
the font - size: 18 px;
vertical - align: middle;

}. The menu - the function > Li: the NTH - child (1) > A: before {
the content: "\ e048";

}. The menu - the function > Li: the NTH - child (2) > A: before {
the content: "\ 3 b";

}. The menu - the function > Li: the NTH - child (3) > A: before {
the content: "7 d ";

}. The menu - share > Li: the NTH - child (1) > A: before {
the content: "\ e0a2";

}. The menu - share > Li: the NTH - child (2) > A: before {
the content: "\ e05b";
}
/* */follow.
dropdown can - menu. Follow {
width: 223 px;

}. The dropdown can - menu. Follow a {
padding - left: 35 px;
the font - size: 14 px;

}. The dropdown can - menu. Follow a: before {
left: 10 px;

}. The dropdown can - menu. Follow li: the NTH - child (1) a: before {
the content: "\ e0a5";

}. The dropdown can - menu. Follow li: the NTH - child (2) a: before {
the content: "\ e0a2";

}. The dropdown can - menu. Follow li: the NTH - child (3) a: before {
the content: "\ e04c";

}. The dropdown can - menu. Follow li: the NTH - child (4) a: before {
the content: "\ e022";

}. The dropdown can - menu. Follow li: the NTH - child (5) a: before {
the content: "\ e03d";

}. The dropdown can - menu. Follow li: the NTH - child (1) a {
color: # ffaa31;

}. The dropdown can - menu. Follow li: the NTH - child (2) a {
color: # 7 beed;

}. The dropdown can - menu. Follow li: the NTH - child (3) a {d91
color: # 314;

}. The dropdown can - menu. Follow li: the NTH - child (4) a {
color: # 2 d2d2d;

}. The dropdown can - menu. Follow li: the NTH - child (5) a {
color: # e84788;

}. The dropdown can - menu. Follow li: the NTH - child (1) : hover {
background - color: # ffaa31;

}. The dropdown can - menu. Follow li: the NTH - child (2) : hover {
background - color: # 7 beed;

}. The dropdown can - menu. Follow li: the NTH - child (3) : hover {
background - color: # 314 d91;

}. The dropdown can - menu. Follow li: the NTH - child (4) : hover {
background - color: # 2 d2d2d;

}. The dropdown can - menu. Follow li: the NTH - child (5) : hover {
background - color: # e84788;

}. The dropdown can - menu. Follow li: hover a {
color: # FFF;
margin - left: 10 px;

}. The dropdown can - menu. Share {
width: 120 px;
right: 0;

}. The dropdown can - menu. Share a {
margin: 10 px;
the line - height: 26 px;
the font - size: 12 px;
padding - left: 20 px;
border: 1 px solid # CBCBCB;
border-radius: 2 px;
color: # 4 c4c4c;
background - color: # efefef;

}. The dropdown can - menu. Share a: hover {
background - color: # FFF;

}. The dropdown can - menu. Share li a: before {
the font - size: 12 px;
left: 5 px;

}. The dropdown can - menu. Share li: the NTH - child (1) a: before {
the content: "\ e04c"; D91
color: # 314;

}. The dropdown can - menu. Share li: the NTH - child (2) a: before {
the content: "\ e0a2";
color: # 7 beed;

}. The dropdown can - menu. Share li: the NTH - child (3) a: before {
the content: "\ e022";
color: # 2 d2d2d;
}
@ the font - face {
the font-family: 'icomoon';
SRC: url (' fonts/icomoon. The 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. The vera.ttf) format (' truetype ');
the font - weight: normal;
the font - style: normal;
}

last attached download package: toolBarMenu_jb51net. Rar


This concludes the body part