Crear un menú con submenus responsive

Hola a todos :D cómo les había dicho he regresado después de unos meses si publicar, esta vez me di a la tarea de crear un menú exclusivo para crear una entrada para el blog, y ahora que está terminado el menú lo comparto.

Es un menú con submenus, y aparte de eso responsive, por lo que funcionara desde cualquier dispositivo o resolución, otra ventaja es que esta hecho sólo con CSS y 15 lineas de javascript, el javascript es para crear el efecto de abrir y cerrar menú desde la vista movil, por lo que no ocupará mucho de la pantalla del dispositivo, sin más que decir empezamos con el tutorial :)

Lo primero que tienen que hacer es irse a Su blog > Plantilla > Editar HTML ya ahí presionan CTRL + F para abrir el buscador, y buscan:

</head>

Y justo arriba agregan el siguiente código:

<style type="text/css">
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
/*MENU*/
#menu {
background: #3C3C3C;
width: 100%;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
float: left;
background: #3C3C3C;
}
#menu a {
color: #FFF;
padding: 7px;
display: block;
font-family: sans-serif;
font-size: large;
text-decoration: none;
}
#menu a:hover {
background: rgba(0, 0, 0, .3);
}
#menu ul li:hover > ul.submenu{
display: inherit;
}
.submenu {
border: 2px solid #3C3C3C;
min-width: 200px;
position: absolute;
display: none;
}
.submenu li {
clear: both;
width: 100%;
}
/*MENU RESPONSIVE*/
#menu_link{
display: block;
font-size: large;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 10px 0px 10px 0px;
}
#menu_link::after {
content: '';
width: 27px;
float: right;
border-top: 3px solid #FFF;
border-bottom: 3px solid #FFF;
height: 6px;
left: 27px;
position: relative;
}
#menu_link::before {
content: '';
width: 27px;
float: right;
border-top: 3px solid #FFF;
position: relative;
top: 18px;
}
#menu_res{
width: 98%;
background: #3C3C3C;
padding: 0px 1% 0px 1%;
display: none;
}
#menu_res ul{
margin: 0;
padding: 0;
list-style: none;
background: rgba(0,0,0,0.2);
}
#menu_res a{
color: #FFF;
text-transform: uppercase;
padding: 7px;
display: block;
text-decoration: none;
text-align: left;
font-family: sans-serif;
font-weight: normal;
}
#menu_res ul li a:hover{
background: rgba(250, 250, 250,0.3);
text-decoration: none;
}
#res_container{
display: none;
padding-bottom: 5px;
}
#menu_res #res_container ul li ul{
display: none
}
@media only screen and (max-width: 660px){
#menu{
display: none;
}
#menu_res{
display: inherit;
}
}
</style>
<script type="text/javascript">
function get_menu() {
var objs = document.getElementById('res_container');
if (objs.style.display == 'inherit') {
objs.style.display = 'none';
} else {
objs.style.display = 'inherit';
}
}
function get_submenu(n) {
if (document.getElementById('res_sub'+n).style.display == 'inherit') {
document.getElementById('res_sub'+n).style.display = 'none';
} else {
document.getElementById('res_sub'+n).style.display = 'inherit';
}
}
</script>

Y ahora le dan en guardar.
Ese es todo el código necesario para que funcione nuestro menpu, así que ahora lo que hacemos es irnos a Diseño y ahí agregan un Gadget HTML/Javascript y dentro de el pegan el siguiente código:

<nav id="menu">
<ul>
<li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
<li><a href="#"><i class="fa fa-video-camera"></i> Videos</a></li>
<li><a href="#"><i class="fa fa-coffee"></i> Curiosidades</a></li>
<li><a href="#">Sub menú <i class="fa fa-chevron-down"></i></a>
<ul class="submenu">
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> Enterate</a></li>
<li><a href="#">Sub menú 2 <i class="fa fa-chevron-down"></i></a>
<ul class="submenu">
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
</ul>
<div style="clear:both">
</nav>
<nav id='menu_res'>
<a href="javascript:get_menu()" id='menu_link'>Menú</a>
<div id='res_container'>
<ul>
<li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
<li><a href="#"><i class="fa fa-video-camera"></i> Videos</a></li>
<li><a href="#"> <i class="fa fa-coffee"></i>Curiosidades</a></li>
<li><a href="javascript:get_submenu(1)">Sub menu <i class="fa fa-chevron-down"></i></a>
<ul id='res_sub1'>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#">Sub menu 3</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> Enterate</a></li>
<li><a href="javascript:get_submenu(2)">Sub menu 2 <i class="fa fa-chevron-down"></i></a>
<ul id='res_sub2'>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#">Sub menu 3</a></li>
</ul>
</li>
</ul>
</div>
</nav>

Ese es todo el menú, como ven son dos menús, uno para el movil y otro el normal, así que tendrán que editar los enlaces en cada uno de los menus.

Y eso es todo en este tutorial, como siempre espero que les sirva y que lo usen, si tienen problemas haganmelo saber a través del formulario de comentarios de Blogger o Facebook yo les responderé. :)