Venezuela sudamerica/South America/Contacto para la fabricación de calzados

Learn how to design your own HTML tutorial web page #6 drop-down menu

A pleasure to greet my dear readers for me is a pleasure to bring you the 6th part of the web design course.
I was a little away from these tutorials because it is something that requires a little time and dedication, but I was working on other projects of my university studies.


Without further ado let’s start, today I will show you a drop-down menu with css and html.

Step 1


We start by creating a list for the menu.
If you do not know how to create a list visit my post in the following link List


Step 2

We put the nav tag with an id attribute to identify the menu.



Step 3

We place the href=”#”. These are the ones that lead to the linked links of the pages that we put on the menu.


Step 4

The properties are placed in the css document to give the style to the menu since there are many types of properties, you can try them all you like here a page of css properties explained each one of them.5.jpg

Here we can visualize how our menu is showing a better style


Step 5

To create this type of menu, we will apply the CSS display rule that will make the links within the drop-down list only show when the mouse passes.PD: If you notice, by default we hide the links of the submenu with display: none and then we show them by applying the display: block with the selector :hover

In addition, for our links to appear vertically and not horizontally as in the main menu, we will apply the CSS rule of
float: none


Our result


PD: We put a background picture for a better look of our menu

This has been all for today, I hope you have learned something from this tutorial any questions leave me in the comments that will gladly respond.


Follow me on my social networks

twitter.jpg  facebook.jpg  instagram-logo-gif-9.jpg


Previous Tutorials

Tutorial 1 Tutorial 2 Tutorial 3 Tutorial 4 Tutorial 5
Introduction Paragraphs, titles and labels Tables and lists Forms Link a css document with html

All images are screenshots of my property

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *