Menu desplegable en CSS, sin Javascript

Para ver en youtube haz click aquí
Para ir a mi canal haz click aquí  (Recuerda suscribirte)

    En el video que acabas de ver te enseñaré a crear un menú desplegable también conocido como "Dropdown menu" solo en CSS, aquí no hay nada de JavaScript, mucha gente hace esto no solo con JS sino que acude a librerías como JQuery cuando hacerlo de esta forma es bastante sencillo.

  El código que acabas de ver te va a funcionar en prácticamente todos los navegadores actualmente en uso, incluso en versiones viejas de Internet Explorer, como la versión 7, este último lo nombro porque es el que siempre tiende a hacer las cosas diferentes. Eso ha cambiado mucho con la llegada de Microsoft Edge el cual es ful compatible con CSS3, luego de ver el video, a través de esta entrada voy a explicar cada uno de los elementos, y al final puedes descargar el código fuente.

Propiedades CSS 

•   Padding: Esta propiedad altera el espacio en blanco que se encuentra alrededor del contenido, al colocarle un número cada vez mas alto estamos haciendo este espacio mas grande, este espacio esta entre el elemento y el borde de nuestro objeto
• Margin: Se refiere al espacio en blanco que se encuentra alrededor de nuestro objeto y fuera del borde, este espacio rodea a nuestro objeto desde fuera del borde
• lyst-style-type: Elimina los adornos que tienen las listas, por lo general HTML solo crea un pequeño circulo del lado derecho del texto de los elementos de nuestra lista
• background-color: Especifica el color de fondo de nuestro objeto
• color: Aquí podemos definir el color de nuestro objeto, si hablamos de un enlace, por ejemplo, nos referimos al texto del mismo
• text-decoration: Esta propiedad es casi exclusiva de los enlaces, elimina el subrayado del texto
• display: Aquí especificamos la forma en la cual se van a mostrar los elementos, es importante destacar de que aquí solo voy a mencionar las propiedades usadas en el vídeo y algunas importantes, al final un enlace donde podrán verlas todas :
• • inline: Los despliega en orden de linea
  • inline-block: En linea y en forma de bloque
  • none: No muestra el elemento, hace lo mismo que usar "visibility:hidden", pero recomiendo utilizar visibility ya que esta es animable, en cambio display no lo es
  • block: Lo muestra como un bloque
• font-family: Aquí podemos cambiar el tipo de fuente
• position: Aquí le decimos como vamos a posicionar los elementos, con el valor "absolute" creamos una capa flotante, que no afecta la disposición de los demás elementos
• visibility: Aquí podemos especificar si el elemento en cuestión va a ser visible o no
• opacity: Recibe valores entre 1 y 0, con esto creamos una transparencia
• transition: Esto nos permite crear una animación usando los estados de nuestro elemento.

Para más información sobre display click aquí

Para más información sobre las transiciones click aquí

¿Cual es la diferencia entre Padding y Margin?

  Padding se refiere al espacio en blanco que se encuentra, entre el borde y el contenido, no saliendo este fuera del borde.

 Margin es el espacio en blanco que está fuera del borde y que separa nuestro objeto de otros objetos.

Código fuente

  En el enlace a continuación podrás descargar el código fuente :

  Click aquí para descargar el código fuente