Código CSS del menú de este blog

Dejare aquí el código CSS del menú que tiene este blog para que lo utilices tu también y lo personalices a tu gusto. Cualquier persona puede obtener el código CSS de una web y del menú (No se lo digas a nadie) así que ¿porque no compartirlo?. Este menú es desplegable con sub-menús.

Aquí dejare un ejemplo de como se vera el menú, pero puedes mirar el menú de este blog que esta arriba porque el código que utiliza es el mismo que voy a publicar.

Si no sabes como agregar el código CSS a tu blog clic aquí, en esa entrada explico como insertar el código CSS de un menú a un blog pero tu utilizaras el código CSS que he dejado aquí abajo, solo tienes que pegar el código CSS en Tema>>Personalizar>>Avanzado>>Añadir CSS y pulsas en "Aplicar al blog" para guardar.

Ejemplo:

• Inicio
• German
  • Quien es?
  • Opción
  • Otra opción
• Programación
  • Android
  • Web
    • CSS
    • HTML
    • PHP
• Humor
  • Opción 1
  • Opción 2
  • Opción 3

Código HTML del ejemplo:

<div id="mgn">
 <ul>
  <li><a href="">Inicio</a></li>
  <li><a href="">German</a>
   <ul>
    <li><a href="">Quien es?</a></li>
    <li><a href="">Opción</a></li>
    <li><a href="">Otra opción</a></li>
   </ul>
  </li>
  <li><a href="">Programación</a>
   <ul>
    <li><a href="">Android</a></li>
    <li><a href="">Web</a>
     <ul>
      <li><a href="">CSS</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">PHP</a></li>
     </ul>
    </li>
   </ul>
  </li>
  <li><a href="">Humor</a>
   <ul>
    <li><a href="">Opción 1</a></li>
    <li><a href="">Opción 2</a></li>
    <li><a href="">Opción 3</a></li>
   </ul>
  </li>
 </ul>
</div>

Código CSS del menú:

/*
*Autor: German Conde
*Creado tras fusionar dos menús de diferentes tipos :)
*Web: https://german-conde.blogspot.com
*/
#mgn {margin: 0 auto; padding: 8px; 

background: #033d03 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5i0OoTYSbCoqLtEatn9GyKeDIp57l8JVfoPyW5y77xOQHrSwqd7eEFYgN4G3rhqoGVp8daPumdcFLpRJKK9iwdA93Gfn7j8Gg9KrQi-VDhrxT0RizbRNbHOMSRQscyjWsb_sMnkwCNJR/s1600/gov.png") repeat-x 0 -110px;
border-radius: 1em;
 font: normal 1em Arial, Helvetica, sans-serif;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#mgn ul {
float: none;
margin: 0;
padding: 0;
overflow: visible;
}
#mgn li a, #nav li a:link, #mgn li a:visited {
display: block;
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;

font-weight: bold;
 color: #e7e5e5;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 text-shadow: 0 1px 1px rgba(0,0,0, .3);
}

#mgn .active a, #mgn li:hover > a {
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;

background: #fff;
 color: #444;
 -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 box-shadow: 0 1px 1px rgba(0,0,0, .2);
 text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
#mgn li li a, #nav li li a:link, #mgn li li a:visited {
width: 155px;
float: none;

background: none;
 border: none;
 color: #666;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#mgn li li a:hover, #mgn li li a:active {
 background: #040404 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhhWO4AfygUyP_pq-SIX7k0Mz3AaOSUZE0UTSIhOJeR0_ZbQEIVNINLgxS2rBRmRz13XyJXE2Eg7gvrANE7lzwLeIkUFBw7-Ukv4dbjbI0WRU8QGbCQv5TBAY10OCIZ0n8RvgVe3nHHjU/s1600/ovlyg.png") repeat-x 0 -100px !important;
 color: #fff !important;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 text-shadow: 0 1px 1px rgba(0,0,0, .1);
 
}
#mgn li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0 1px 4px;
}
#mgn li ul { z-index: 9999; position: absolute; left: -999em;
height: auto; width: 185px; margin: 0; padding: 3px;

 /*top: 50px;*/
 background: #ddd url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhhWO4AfygUyP_pq-SIX7k0Mz3AaOSUZE0UTSIhOJeR0_ZbQEIVNINLgxS2rBRmRz13XyJXE2Eg7gvrANE7lzwLeIkUFBw7-Ukv4dbjbI0WRU8QGbCQv5TBAY10OCIZ0n8RvgVe3nHHjU/s1600/ovlyg.png") repeat-x 0 0;
 border: solid 1px #b4b4b4;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#mgn li ul ul { z-index: 9999; position: absolute; left: -999em;
height: auto; width: 185px; margin: 0; padding: 4px;

 /*top: 10px;*/
 background: #ddd url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhhWO4AfygUyP_pq-SIX7k0Mz3AaOSUZE0UTSIhOJeR0_ZbQEIVNINLgxS2rBRmRz13XyJXE2Eg7gvrANE7lzwLeIkUFBw7-Ukv4dbjbI0WRU8QGbCQv5TBAY10OCIZ0n8RvgVe3nHHjU/s1600/ovlyg.png") repeat-x 0 0;
 border: solid 1px #b4b4b4;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#mgn li ul a { width: 155px; }
#mgn li ul ul { margin: 0px 0 0 0px;}
#mgn li:hover ul ul, #mgn li:hover ul ul ul, #mgn li.sfhover ul ul, #mgn li.sfhover ul ul ul {left: -999em;}
#mgn li:hover ul, #mgn li.sfhover ul { left: auto; }
#mgn li li:hover ul, #mgn li li.sfhover ul { left: 190px; margin-top:-38px;}
#mgn li:hover, #mgn li.sfhover {position: static;}

Eso es todo saludos y nos leemos.