Dropdown Menu CSS
There is no fixed rule for creating a dropdown menu. It depends on your creativity and requirement.
We strictly advise you to try changing these examples and see the difference by yourself.
To create a horizontal dropdown menu, follow these steps-
- Code list-style: none for the Unordered list
- You should code float: left for the list items
- Wrap the inner unordered list under the main list item like –
- By default, the items under the menu should be hidden. Use the display: none on the inner unordered list which is present under the list item like below –
- You should also use float: none in such a way that all the items should come below each other in the same order they are defined. The code can be like this –
Example of Horizontal Dropdown
The idea of creating vertical dropdown is similar to the horizontal dropdown.
The code below is self-explanatory.
The best way to master the dropdown is to change our example and spot the difference.
Example of Vertical Dropdown
In the above example, if we remove the position: relative from –
Then, the result would be very different. See the output below –
Example of Vertical Dropdown after doing minor change-
Another Example of Dropdown Navigation Menu
Let’s do some small changes and create a different type of dropdown Navigation menu
Now, we are showing you another example of a dropdown menu in order to provide you maximum ways to create the dropdown menu.
Here, we will create a contrasting color of the menu items on hover.
Change it for yourself and analyze the output.
Dropdown on Select
Suppose, you need to show the list of options from the dropdown only when you click on the dropdown menu, then you can use the <select> tag with <option> tag.
You can style the <select> tag with other style properties like background-color, padding, margin, etc.
Basically, it gives a list of options from the dropdown on select.
Example of Dropdown on select
Now, instead of text in the menu, we are going to use an image to create an image dropdown as below-
Example of Image Dropdown
Multilevel Dropdown Menu
Now, let us create multilevel dropdown Menu i.e. sub-menus under a menu.
This is one of the most important examples which you should master.
Example of Multilevel Dropdown Menu
Drop Down Hover
We are going to show a simple drop down hover effect for the @keyframes property of animation along with the <nav> tag.
Example of Drop Down Hover
Drop Down With Arrow
In the modern age, we see many websites which use arrows to give a clue to the user that this is a dropdown and it contains menu items.
To create the arrow, you can use Icons like Font Awesome Icons, Google Icons, Bootstrap Icons.
The alternative solution is to use HTML entity for Arrows. Here we are using the HTML5 entity (▼) for vertical downward arrow and (►) for the horizontal left to right arrow.
Example of Drop Down With Arrow
Vertical Drop Down With Sub Menu
Sometimes, you want to create a sub-menu under a menu in a vertical dropdown menu.
Let us see how we can create it –
Example of Vertical Drop Down With Sub Menu
Example of Dropdown Menu combining multiple properties
Based on our learning so far, we are going to create a dropdown which combines various properties like display, text-align, box-shadow, linear-gradients, animation, etc.