HTML Website Tutorials: How To Make Drop Down Menu Using HTML And CSS -

In this tutorial we provide the source code for design a drop down menu. Menu bar is the important part of each and every website. So, this code help you to improve your knowledge about Menu bar designing.

HTML code for 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>Drop Down Menu Bar</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Servies</a>
                <ul>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Email</a>
                        <ul>
                            <li><a href="#">Gmail</a></li>
                            <li><a href="#">Yahoo</a></li>
                            <li><a href="#">Verizon</a></li>
                        </ul>
                    </li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Internet</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Write for us</a></li>
        </ul>
    </nav>
</body>
</html>

CSS for Drop Down Menu

*{
    padding: 0;
    margin: 0;
}
a{
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    padding: 15px;
}
a:hover{
    text-decoration: underline;
}
nav ul{
    display: flex;
    background-color: blue;
    justify-content: space-between;
    position: relative;
}
nav ul ul{
    display: none;
    position: absolute;
}
nav ul li:hover ul{
    display: block;
    position: absolute;
    left: 70px;
    z-index: 1;
}
nav ul li{
    padding: 15px;
    list-style: none;
    position: relative;
}
nav ul li:hover ul ul{
    display: none;
    position: absolute;
}
nav ul ul li:hover ul{
    display: block;
    position: absolute;
    left: 125px;
    z-index: 2;
}

Download Source Code