Código do menu fixo no topo do blog com sub-abas e ícones sociais

Link do tutorial: http://www.manualdablogueira.com.br/2018/02/menu-fixo-no-topo-do-blog-com-sub-abas.html


Acima de ]]></b:skin>

/************************* MENU RESPONSIVO ******************************/
#NavbarMenu {
background: #000; /*--COR DE FUNDO DO MENU--*/
width: 100%;
height: 40px; /*--ALTURA DO MENU--*/
margin: 0;
padding: 0;
position: fixed;
top: 0px;
left:0px;
z-index: 999;
border-left: 220px solid #000; /*--ARRASTA O MENU PARA DIREITA--*/
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #fff; /*--COR DA FONTE--*/
display: block;
font-size: 13px;/*--TAMANHO DA FONTE--*/
font-family: 'Montserrat', sans-serif; /*--NOME DA FONTE--*/
font-weight: normal;
text-transform: uppercase;
margin: 0;
padding: 13px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: transparent;/*--COR DE FUNDO DO MENU AO PASSAR O MOUSE--*/
color: #E89CCD; /*--COR DA FONTE DO MENU AO PASSAR O MOUSE--*/
margin: 0;
padding: 13px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #000;/*--COR DE FUNDO DA SUB ABA--*/
width: 100px;
color: #fff; /*--COR DA FONTE DA SUB ABA--*/
font-size: 13px;/*--TAMANHO DA FONTE DA SUB ABA--*/
font-family: 'Montserrat', sans-serif; /*--NOME DA FONTE--*/
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #000;/*--COR DE FUNDO DA SUB ABA AO PASSAR O MOUSE--*/
color: #E89CCD; /*--COR DA FONTE DA SUB ABA AO PASSAR O MOUSE--*/
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

Dentro do HTML/JavaScript

<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav">
<li><a href="#">Inicio</a>
<li><a href="#">Blogroll</a>
<li><a href="#">Clipling</a>
<li><a href="#">Parcerias</a>
<li><a href="#">Anuncie</a>
<li><a href="#">Sobre</a>
<li><a href="#">Contato</a>
<li><a href="#">Categorias <i class='fa fa-plus' target='_blank'></i> </a>
<ul>
<li><a href="#">Beleza</a></li>
<li><a href="#">Moda</a></li>
<li><a href="#">Cabelo</a></li>
<li><a href="#">Decoração</a></li>
<li><a href="#">Viagens</a></li>
<li><a href="#">Culinária</a></li>
<li><a href="#">Resenhas</a></li>
</ul></li></li></li></li></li></li></li></li>
<li><a href='https://www.facebook.com/nomedoseublog><i class='fa fa-facebook' target='_blank'></i></a></li>
<li><a href='https://www.twitter.com/nomedoseublog ' target='_blank'><i class='fa fa-twitter'></i></a></li>
<li><a href='https://www.instagram.com/nomedoseublog' target='_blank'><i class='fa fa-instagram'></i></a></li>
<li><a href='https://www.pinterest.com/nomedoseublog' target='_blank'><i class='fa fa-pinterest'></i></a></li>
<li><a href='https://www.youtube.com/nomedoseublog' target='_blank'><i class='fa fa-play'></i></a></li>
</ul>
<style></style>
 
</div>
</div>
<div style="clear: both;">
   </div>