Tutoid

Hey Everyone and welcome back to Tutoid. In this tutorial i will show you how to make a very simple horizontal dropdown menu for website. It is very easy and i hope you will like it.

So first goes the basic structure of menu. I will using simple div elements instead of ul and li.

menu-item is the single element of menu which contains menu-head as the name. For sub-menu we have

So finally we have our full menu structure with the sub-menu.

Now we can move on to CSS. property ‘display’ allow us to hide and show the element from page.

When display is set to none, that element does not take space in the page.

So when we hover menu element we change the display property to ‘block‘. So here is our CSS.

So now you are ready with your own CSS Dropdown Menus for website.

View original post 4 more words

Advertisements