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.

8.jpg

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

uno.jpg

Step 2


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

tres.jpg

DOS.jpg

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.

cuatro.jpg

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

seis.jpg

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

7.jpg

Our result

8.jpg

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.

modificado_11.png

Follow me on my social networks

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


modificado_11.png

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!