How to Create a Simple CSS Dropdown Menu
access_time
hourglass_empty
person_outline

How to Create a Simple CSS Dropdown Menu

A dropdown menu is very useful when it comes to organizing pages and subpages within your website. The effect can easily be created using CSS. In this tutorial, we’ll be showing you how to build a CSS dropdown menu. Let’s get started!

Creating a CSS Dropdown Menu

To create a dropdown menu using CSS, you’ll only need to use the File Manager on your hosting control panel and follow these steps:

Step 1. Creating a Blank HTML File

First thing first, make an HTML file for your menu.

  1. On your hPanel, select the File Manager under the Files section.
  2. Click on Go to File Manager -> public_html.
  3. Select the New File button and create a file named menu.html.
    Click on Add New button to create a new file.

Now that you’ve created the menu.html file, it’s time to generate the menu syntax.

Step 2. Adding HTML Menu Code

Here, we’ll create a menu button that consists of one main menu (parent menu) and five sub-menus (child menu). You can link each sub-menu to different pages on your website.

Open the menu.html file and add the following syntax:

<div class="dropdown">
  <button class="mainmenubtn">Main Menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdomain.com/page1.html">Sub Menu 1</a>
    <a href="http://wwww.yourdomain.com/page2.html">Sub Menu 2</a>
    <a href="http://wwww.yourdomain.com/page3.html">Sub Menu 3</a>
    <a href="http://wwww.yourdomain.com/page4.html">Sub Menu 4</a>
    <a href="http://wwww.yourdomain.com/page5.html">Sub Menu 5</a>
  </div>
</div>

You might notice that each element has a different class – dropdown, mainmenubtn, and dropdown-child. These classes are necessary for applying different CSS rules on the next step.

This is how the HTML menu looks like without any CSS rules:The dropdown menu looks plain and displayed horizontally without any CSS rules

Don’t forget to change the menus’ URL inside the href attribute with the URL of your website pages, and rename the menus.

Step 3. Applying CSS and Creating Dropdown Effect

As you can see, the plain HTML menu is not attractive. So now, we’ll color the menu button and create a dropdown effect. Style the HTML code by placing the following CSS rules on the top of the previous code:

.mainmenubtn {
    background-color: skyblue;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.mainmenubtn:hover {
    background-color: blue;
    }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: skyblue;
    min-width: 200px;
}
.dropdown-child a {
    color: blue;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Feel free to experiment with CSS by changing the colors and sizes to suit your needs.

The final menu.html document should look like this:

<html>
<head>
<style>
.mainmenubtn {
    background-color: skyblue;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.mainmenubtn:hover {
    background-color: blue;
    }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: skyblue;
    min-width: 200px;
}
.dropdown-child a {
    color: blue;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Main Menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdomain.com/page1.html">Sub Menu 1</a>
    <a href="http://wwww.yourdomain.com/page2.html">Sub Menu 2</a>
    <a href="http://wwww.yourdomain.com/page3.html">Sub Menu 3</a>
    <a href="http://wwww.yourdomain.com/page4.html">Sub Menu 4</a>
    <a href="http://wwww.yourdomain.com/page5.html">Sub Menu 5</a>
  </div>
</div>
</body>
</html>

In this example, the CSS styles are placed in the same HTML file (internal stylesheet). However, you can create a separated CSS file and link it to any HTML documents.

Once you’re done, save and download the file. Here’s what you’ll see when you open it on your browser:

Opening the menu.html file on browsers. It will hover down when the Main Menu button is clicked.

Inserting the Dropdown Menu to Your Theme

To display your dropdown menu, you’ll have to attach the HTML document to your theme template files using the readfile() function. Perform these steps on your File Manager to do so:

  1. On the public_html folder, head over to wp_content -> themes. Then, access your currently used theme folder.
  2. Here, we’ll place the menu on the header. Open the header.php file and paste the following syntax at the bottom of the file content.
    <?php
    // do php stuff
    
    readfile('menu.html');
    
    ?>

    Adding the readfile function at the bottom of the header.php file to display the dropdown menu css to your website.

  3. Save & Close your changes.

Reload your site, and you’ll see that the dropdown menu is applied to your website.

The dropdown menu is applied on your website.

You can create the menu.html file on your local computer and upload it to your hosting account by using an FTP client or Notepad++. Then, insert the file into your currently used theme with the syntax above.

Conclusion

A dropdown menu button is essential for a neat website. The easiest way to create it is by using CSS rules on an HTML file. Create it from the File Manager on your hPanel and insert it to your currently used theme by using the PHP readfile() function.

Why not give it a go!

The Author

Author

Linas L. / @linas

Linas started as a customer success agent and is now a full-stack PHP developer at Hostinger. He is passionate about making a positive impact on people by utilizing user-driven development techniques. As much as he enjoys coding and changing the world, he secretly dreams of becoming a rock star.

Related tutorials

Author

sumaila Reply

February 25 2019

Nice tutorial keep the good work up

Author

Ugochukwu Reply

May 13 2019

Thanks for the Good work..Kudos

Author

shan Reply

September 30 2019

THIS IS ONE OF THE BEST PLATFORM for web developing THANK YOU SIR

Author

TonyUwame Reply

November 19 2019

This is positively good. It has helped a ton. Thanks.

Leave a reply

Comment*

Name*

Email*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a part of Hostinger now!

More in CSS
CSS Cheat Sheet
CSS Cheat Sheet – A Complete Guide for Beginners and Professionals

Close