How 2 Create A Dropdown menu layout With HTML & CSS

dropdown menu

In this Article, I am gonna show you how to create a Dropdown Menu Layout with Pure HTML & CSS.

As you all would have noticed in almost every website a Dropdown menu element and always wondered how I can create a dropdown menu with Pure CSS and HTML code. So you are going to learn how it can be done easily in this article and also watch our video that explains all the essential steps here.

Write Dropdown Menu HTML Code

So we have to start by writing the basic HTML Codes and Unordered List items to assign a basic navigation menu and then nest the submenu items under any primary menu item to display these submenu child items when someone hovers over that primary menu item to display the child item.

You can find the code of the Basic HTML Page with properly nested List item codes given below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu Element</title>

</head>
<body>
    
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Zoho Customization</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

</body>
</html>

Write Dropdown Menu CSS Code to Style the elements

Now its time to completely style your Raw HTML Structure and give it a clean and beautiful design.

Please copy the below CSS Code to style your Dropdown menu items.

body{
            background: rgb(245, 87, 87);
            padding: 5% 15%;
        }
        /*-----Primary Menu Items Styling----*/
        ul{
            list-style: none;
            padding: 10px;
            background: #fff;
            text-align: center;
        }
        ul li{
            list-style: none;
            display: inline-block;
            padding: 10px 20px;
            font-family: Century Gothic;
            font-weight: 600;
            font-size: 14px;
        }
        ul li a{
            text-decoration: none;
            color: #333;
            text-transform: uppercase;
        }
        ul li a:hover{
            color: rgb(245, 87, 87);
        }
        ul li ul{
            display: none;
        }
        ul li:hover ul{
            display: block;
            position: absolute;
            width: 200px;
            padding: 0;
            list-style: none;
            text-align: left;
            margin-top: 10px;
        }
        ul li:hover ul li{
            padding: 0;
            margin: 0;
            display: block;
        }
        ul li:hover ul li a{
            background: #fff;
            padding: 15px 10px;
            display: block;
        }
        ul li:hover ul li a:hover{
            background: rgb(245, 87, 87);
            color: #fff;
        }

So Now its testing time. Save your HTML Page by adding both these codes and then see your result. If you face any issue or have any question, Simply drop your comment below and we will help you get your question answered.

If you have any requirement for website designing, development, or maintenance, You can send us a message

Get Your Quick Tasks Completed

Hire us today to get all your tasks completed with 100% satisfaction.

Leave a Reply

Your email address will not be published. Required fields are marked *

bg author

Manish Bajpai

I am a freelance Web Developer, Zoho One Expert, And Part time blogger. I love developing futuristic websites.

Fill Out this Form to Us

First Name
First Name
Field is required!
Field is required!
Last Name
Last Name
Field is required!
Field is required!
Email Address
Email Address
Field is required!
Field is required!
Phone Number
Phone Number
Field is required!
Field is required!
What you want me to Do?
Field is required!
Field is required!
Number of Hours Required
-
+
Field is required!
Field is required!
Total Cost
$0.00
Field is required!
Field is required!

Minimum Amount to Hire

$25

This is the minimum amount to hire us instantly. Remaining total amount will need to be paid as per the progress of work.