How to create simple Dropdown menu using CSS

by

Welcome to our guide on creating a CSS dropdown menu, an essential feature for enhancing website navigation. Dropdown menus provide users with easy access to various sections or pages, improving user experience. In this tutorial, we’ll take you through the process of building a simple CSS dropdown menu using HTML and CSS. By the end, you’ll have a functional dropdown menu that seamlessly integrates into your website.

Step 1: Understanding the Concept

Let’s start by understanding the concept of a CSS dropdown menu. It’s a menu that appears when users interact with a parent item, such as hovering over it or clicking on it. The dropdown menu then displays additional options or subcategories. Our goal is to create a simple dropdown menu that’s easy to use and fits well within any website design.

Step 2: Setting Up the HTML Structure

Begin by setting up the basic HTML structure for our dropdown menu. Open your text editor or visual studio code and create a new HTML file named index.html. Insert the following code:

<html>
<head>
    <title>CSS Dropdown Menu</title>
    <style> </style>
</head>
<body>
    <nav class="dropdown-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#">Products</a>
                <ul class="dropdown-content">
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">Product 2</a></li>
                    <li><a href="#">Product 3</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Explanation

  • We’ve structured our menu using HTML5 semantic elements, with a <nav> container to hold the menu items.
  • Inside the <nav> we’ve created an unordered list (ul) with list items (li) representing each menu item.
  • The second list item has a class “dropdown” to indicate it has a dropdown menu.
  • Within the dropdown list item, we’ve added another unordered list with list items representing the dropdown content.

Step 3: Styling with CSS

Let’s add CSS styles to enhance the appearance and functionality of our dropdown menu. add the following code between <style> </style> in HTML document:



.dropdown-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu li {
    display: inline-block;
    position: relative; 
}

.dropdown-menu li a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    display: block;
}

.dropdown-menu li:hover .dropdown-content {
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content li {
    display: block;
}

.dropdown-content li a {
    padding: 10px;
    color: #333;
    display: block;
}

.dropdown-content li a:hover {
    background-color: #ddd;
}

Explanation

  • We’ve styled the unordered lists and list items to remove default styles and create horizontal menu items.
  • Anchor tags within list items are styled to remove underlines, set text color, and provide padding.
  • Upon hovering over a list item with the class dropdown, the nested dropdown content is displayed.
  • The dropdown content is styled with a background color and box shadow for a dropdown effect.
  • List items within the dropdown content are displayed as block elements.
  • Anchor tags within the dropdown content have padding and text color styles.
  • On hover, the background color of dropdown menu items changes to indicate interactivity.

Congratulations! You’ve successfully created a CSS dropdown menu. With just a few lines of HTML and CSS, you’ve improved your website’s navigation and provided users with a user-friendly menu

Leave a Comment