How to make a horizontal menu in HTML CSS

Create a horizontal menu in HTML & CSS with an example: learn how to use flexbox & grid to style your navigation bar.

Creating a Horizontal Menu in HTML and CSS

Creating a horizontal menu in HTML and CSS is a straightforward process. In this article, we will cover the steps needed to create a horizontal menu from scratch. We will also provide an example of a menu created using HTML and CSS.

Step 1: Create the HTML Structure

The first step in creating a horizontal menu is to set up the HTML structure. This involves creating a container element, such as a <div>, to wrap the menu items. It is also important to create an <ul> element to contain the menu items. Each menu item should be an <li> element. See the example below:


<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Step 2: Style the Menu with CSS

Once the HTML structure is in place, we can style the menu with CSS. We will use the display property to set the <ul> element to inline-block. This will cause the menu items to be displayed in a horizontal line. We will also use the list-style-type property to remove the default bullets from the menu items. See the example below:


.menu ul {
  display: inline-block;
  list-style-type: none;
}

Step 3: Add Some Basic Styling

We can also add some basic styling to the menu items. We will use the padding property to add some space between the menu items. We will also use the background-color property to give the menu items a background color. See the example below:


.menu li {
  padding: 10px;
  background-color: #f2f2f2;
}

Conclusion

Creating a horizontal menu in HTML and CSS is a straightforward process. We began by creating a container element and an <ul> element to contain the menu items. We then used the display and list-style-type properties to style the menu. Finally, we added some basic styling to the menu items using the padding and background-color properties. With these steps, you can create a basic horizontal menu from scratch.

css