How 2 Create A Dropdown menu layout With HTML & CSS

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