Let’s get started with the HTML:
The menu is created using an unordered list. The class “js-css-menu” is the only required class. The others are optional; if you do not want it you can simply remove it. The dropdown menu is done with a div inside of the li and adjacent to the link.
To help you understand the CSS better, I’m going to eliminate most of the extra, fancy styling and give you the core of what you need by covering the horizontal menu, vertical version, and making it responsive; I’ll leave the styling up to you.
Since I used an unordered list, we have to strip the margins and list styling. This is done by list-style: none; padding: 0; margin: 0.
By default, list items are block elements; therefore, to make the menu horizontal, we have to make them inline. That’s done by display: inline-block.
The dropdown menu
The dropdown menu is created with a div. Since you want it to be hidden until you hover over the link with the menu, you want to initially hide it with display: none. You’ll then display it with display: block in the hover action.
Making the menu vertical
Not much needs to be done to make the menu vertical. To start, add class “vertical” to the menu. Because in order to make the horizontal menu, we had to make the list-items display inline, we must go back to making them block so they can stack. You can achieve that with display: block; float: none; position: relative.
Although the list-items are now block, the unordered list is still inline; therefore, we must give your menu a custom width. You’ll also have to, based on the width of your menu, adjust the left value of the dropdown div to your liking. If you want, you can even adjust the top value of the div as well. In addition, you may have to adjust the width of the div.
Make the menu responsive
In order to achieve a responsive menu, we’ll be using media CSS queries. @media (max-width: 480px) is strictly indicating any CSS inside of this block will only be set if the width of your browser is less-than-or-equal-to 480px (the maximum width allowed for this block of CSS is 480px).
Some styles are inherited from the styles set above; therefore, it’s sometimes necessary to set the !important flag to force the style.
One the CSS is set, just add the class “responsive” to the menu.
Try the demo
I created a fully-functional demo where you can play with some of the options and also download the demo files for use on your website.
I hope you benefited from this tutorial.