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

in computing •  4 months ago

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.


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 1Tutorial 2Tutorial 3Tutorial 4Tutorial 5
IntroductionParagraphs, titles and labelsTables and listsFormsLink a css document with html

All images are screenshots of my property

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Hello! Your post has been resteemed and upvoted by @ilovecoding because we love coding! Keep up good work! Consider upvoting this comment to support the @ilovecoding and increase your future rewards! ^_^ Steem On!

Reply !stop to disable the comment. Thanks!