How to Make Drop-Down Menu in HTML and CSS

Welcome to Coding Power! If you are looking for a Drop-Down Menu in HTML and CSS, then you don’t have to go anywhere else because in this article you can learn how to do that with a proper code explanation and full source code.

Introduction

Watch the Full Tutorial on YouTube

I have made one video on YouTube on How to Make a Drop-Down Menu in HTML and CSS. So, if you prefer video over blog posts, then you can watch this full tutorial on my YouTube channel, and then you can come back here if you need the full source code. You can also check out more tutorials on my channel and subscribe if you like my content.

Source code for the Drop-Down Menu in HTML and CSS

Creating the HTML Structure

First, create one file with the name index.html for all the HTML code for the drop-down menu.

<!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">
    <link rel="stylesheet" href="style.css">
    <title>DropDown Menu</title>
</head>
<body>

    <div class="container">
        <nav class="navbar">
            <div class="logo">
                <p>Coding Power</p>
            </div>
            <div class="links">
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Tutorials</a>
                        <ul class="sub-menu-1">
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">JavaScript</a>
                                <ul class="sub-menu-2">
                                    <li><a href="#">Angular JS</a></li>
                                    <li><a href="#">React JS</a></li>
                                    <li><a href="#">Vue JS</a></li>
                                </ul>
                            </li>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">Python</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Services</a>
                        <ul class="sub-menu-1">
                            <li><a href="#">Web Development</a></li>
                            <li><a href="#">Web Design</a></li>
                            <li><a href="#">Web Hosting</a>
                                <ul class="sub-menu-2">
                                    <li><a href="#">Hostinger</a></li>
                                    <li><a href="#">Bluehost</a></li>
                                    <li><a href="#">SiteGround</a></li>
                                    <li><a href="#">A2 Hosting</a></li>
                                </ul>
                            </li>
                    </li>
                </ul>
                </li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
    </div>
</body>
</html>

Styling with CSS

For Styling Create a new file with the name styles.css and add a style link to the HTML head to link to the CSS file. If you miss that, then CSS will not work for any HTML class or element, so make sure of that first.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: black;
}

.container{
    font-family: Arial, Helvetica, sans-serif;
}

.container::before{
    content: "";
    background: url(bg.jpg) no-repeat center center/cover;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.5;
}

.container .navbar{
    height: 70px;
    background-color: #333;
    display: flex;
}

.container .navbar .logo{
    width: 200px;
    margin: auto 0;
    text-align: center;
    margin-right: 30px;
}

.container .navbar .logo p{
    font-size: 25px;
    padding: 13px;
    display: block;
    color: white;
}

.container .navbar .links .menu{
    display: flex;
    height: 100%;
}

.container .navbar .links .menu li{
    margin: auto 0;
    width: 100px;
    padding: 10px;
    list-style: none;
    text-align: center;
    position: relative;
}

.container .navbar .links .menu li:hover,
.container .navbar .links .menu li:hover .sub-menu-1 li:hover{
    background-color: tomato;
}

.container .navbar .links .menu li a{
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.container .navbar .links .menu li .sub-menu-1{
   display: none;
    position: absolute;
    top: 42px;
    left: 0;
}

.container .navbar .links .menu li:hover .sub-menu-1{
    display: block;
}

.container .navbar .links .menu li .sub-menu-1 li{
    width: 200px;
    height: 45px;
    text-align: center;
    background: #333;
    padding: 12px;
    position: relative;
}

.container .navbar .links .menu li .sub-menu-1 li .sub-menu-2{
    display: none;
    position: absolute;
    left: 200px;
    top: 0;
}

.container .navbar .links .menu li:hover .sub-menu-1 li:hover .sub-menu-2{
    display: block;
}

.container .navbar .links .menu li .sub-menu-1 li .sub-menu-2 li{
    width: 180px;
    text-align: center;
    background: #333;
    padding: 12px;
}

That’s all you have to do for the drop-down menu in HTML and CSS. Still, if you are facing any kind of issue after using the above code, you can download the full source code with images shown in the video tutorial by clicking on the below button. Also,  after downloading, you will get only one zip file, so unzip that file for HTML, CSS, and images.

Conclusion

In this blog, we have shown all the steps with a proper explanation of the full code, so it will help you learn and create Drop-Down Menu in HTML and CSS according to your needs. Still, if you are not getting anything from the above code or if you have any doubts regarding the card slider, feel free to leave your question in the comment section. I am happy to help.

FAQ

What is the drop-down menu?

The drop-down menu is nothing but a navigation bar that has multiple menus inside a single menu. For example,  in my design of the drop-down menu, there is one menu item, Services, but inside there are some sub-menu items like web development, web design, and more. 

Leave a Comment