• Simple Html Drop Down Menu

.Creating a CSS Dropdown MenuTo 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 FileFirst thing first, make an HTML file for your menu. On your hPanel, select the File Manager under the Files section. Click on Go to File Manager - publichtml. Select the New File button and create a file named menu.html.Now that you’ve created the menu.html file, it’s time to generate the menu syntax. Adding HTML Menu CodeHere, 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: Main MenuSub Menu 1Sub Menu 2Sub Menu 3Sub Menu 4Sub Menu 5You 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. In this example, the CSS styles are placed in the same HTML file (internal stylesheet). However, you can create a separated CSS file and 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:Inserting the Dropdown Menu to Your ThemeTo display your dropdown menu, you’ll have to attach the HTML document to your theme template files using the function. Perform these steps on your File Manager to do so:.

Simple Html Drop Down Menu

On the publichtml folder, head over to wpcontent - themes. Then, access your currently used theme folder. 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. Save & Close your changes.Reload your site, and you’ll see that the dropdown menu is applied to your website.