Hey guys! Are you tired searching the Net a tutorial on how to make a simple drop-down menu in your website but all of those were difficult to learn and its complicated because it uses different scripts. But today, here is a simple tutorial on how to create a simple drop down menu in CSS without the help of Javascript or any other scripting language. Below is the final sample output.
First, we need to create the HTML document to create menu and sub-menus using Unordered List. Then, we will create the CSS script and link to the HTML document we’ve created to format the said menus. Here is the sample HTML code:
Save this as index.html and you try to run or execute this in your browser without our CSS script, this will be the initial output:
And now we are ready to create the CSS script and apply it with our HTML code. First, we need to remove the list symbol and aligned them in the left. Here is the CSS code:
The code “list-style:none” will remove the list symbol and set to zero both the margin and padding to align them to the left. Below is the sample output:
Next thing to do is to align or position the main menu to horizontal line same with the submenu which will be placed below its main menu. Insert the code below in your CSS :
Here the value of the display property should be block so that all the lists both the main and sub-lists will be displayed horizontally. This will be the output in your browser.
Next thing to do is to temporary set the submenu to INVISIBLE. Why? Because, it will just appear if we’re going to put the mouse over the menu which they belong. To to that, add the following code in your CSS:
The selector li and ul indicates the submenu in our HTML tag, then the “display:none”, this will temporarily set the submenu invisible in the browser. This is the sample output in your browser:
So, its time to make our menu and submenu more decorative, we will add some formatting scripts. Add this to your code:
The “display:block” displays the menu and submenu to a rectangluar form. As you click the menu “About TutGeeks”, the submenu will not appear, because it is still invisible in your browser. The image below is the output once you inserted the code above.
And now, this the magic part of this tutorial. We will now try to make the sub-menu VISIBLE once we clicked its main menu. We will just use the pseudo code HOVER for the list since all of these are links. Below is the code:
The pseudo-code “li:hover” is applied in the main menu while the selector ul indicates the lists or sub-menus. If you see in our previous code, inside the selectors li ul, the display value was set to none, so the sub-menu went to invisible. But this time, we will now set the display property to block so that it will appear horizontally or in rectangular forms. See the image below:
So as you can see, the sub-appeared as we put the mouser over the main menu. Now, its time to apply active selection such as applying background color as we select both the main menu or sub-menu. We will also set same length of the sub-menus.
First we will apply hover effect to the main menu. Try this:
We will use the pseudo-code “li:hover” since the main menu were lists and the selector “a” indicates that the color will be applied to all links including the sub-menus as you can see simple output below:
                    
So, to apply also hover effects to the sub-menu to indicate selections, we will also put a background color to it. See the sample image output below:
To do this, we will just simply apply the pseudo-code hover to all the links of the sub-list (sub-menu) of the main lists (main menu). Confuse? Try this:
To explain this, the pseudo-code “li:hover” indicates the main menu while the selector li indicates the sub-lists. If this sub-list is a link, then the hover effect will be applied. See the sample output above.
Finally, we will now set the length of the sub-menu be consistent like the image below.
Insert this code:
There you have it guys. Congratulations! You made your first drop-down menu using pure CSS code script. Like this guys if you like this tutorial! Happy programming.Tweet
