A horizontal menu contains a list of pages and subpages. Users can access your content by clicking or hovering over the menu.
This design element reduces the clutter of buttons, links, and text, which is useful for improving the user experience of a website or app on small screens.
Read on because we are going to cover the steps to create a horizontal menu using CSS and HTML. You will also learn how to style the newly created dropdown menu to match your project branding.
This tutorial requires a text editor to create the HTML and CSS file that contains the horizontal menu code. You can also do this through the File Manager of your hosting control panel, which we are going to use for our horizontal menu example.
Step 1: Create a blank HTML file and add the HTML code
The first thing is to create an HTML file for your menu.
- In your hPanel, select the File Manager in the section of Records.
- In the File Manager click on public_html.
- Select the button New File and create a file called menu.html.
Now that you have created the file menu.htmlit’s time to generate the menu syntax.
Next, we’ll create a menu button consisting of a main menu (parent menu) and five submenus (child menus). You can link each submenu to different pages of your website.
open the file menu.html and add the following syntax:
The classes dropdown, mainmenubtn Y dropdown-child represent different HTML elements. CSS will use them to access a specific element and alter its layout.
This is what the HTML menu looks like without any CSS rules:
pro tip
Don’t forget to change the URL of the menus inside the attribute href with the URL of the pages of your website and rename the menus to reflect the actual content of the page.
Step 2 – Apply CSS and Create the Dropdown Effect
Now that you have HTML elements to work with, let’s create the dropdown effect and the CSS rules for each of them.
Generates an internal style sheet within the file menu.html placing the following code inside the element