Hello!

In this tutorial we are going to learn how to create a dropdown menu using HTML/and CSS only.

STEP 1

First of all we have to open the program and create the folder with HTML and CSS files.

STEP 2

We can continue creating the HTML basic structure.

 

STEP 3

First of all we should create a div <header> inside this div we are going to put all out content. The content of our div will be a list <ul> and this list we will use sublist <li>.

We can use as many labels as we want.

 

STEP 4

When we have all the information in HTML we can go to CSS to give styles. First of all we give a style to header. This style will affect all the menu.

 

 

STEP 5

We continue giving styles to menu. We will modify the nav label and we will give the following styles.

 

STEP 6

Okey, now we want to put menu in horitzontal way, for doing this we have to use the following code:

 

STEP 7

Now we will use a hover style, with this style when we pass with the mouse over the menu, this is going to animate.

 

STEP 8

We continue trying to hide the submenus. We want the submenus ara visible only when we pass the mouse over the menu.

 

And that’s all!

 

In this link you can see how it works:

Thank you,

Deju