Drop Down Navigation Menu with CSS and HTML ( Source Code )

Drop Down Navigation Menu with CSS and HTML ( Source Code )

HTML

<nav class="nav-area">
        <ul>
<li><a href="#">home</a></li>
<li><a href="#">About</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="#">Email Marketing</a></li>
<li><a href="#">Graphics Design</a>
                        <ul>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Card Design</a></li>
<li><a href="#">Poster Design</a></li>
<li><a href="#">Template Design</a>
                                <ul>
<li><a href="#">Web Template</a></li>
<li><a href="#">Email Template</a></li>
<li><a href="#">News Template</a></li>
<li><a href="#">Bio Template</a></li>
<li><a href="#">Wedding Template</a></li>
</ul>
</li>
<li><a href="#">Brochure Design</a></li>
</ul>
</li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

CSS

body{
            margin: 0;
            padding: 0;
            font-family:poppins;
            background: url("2.jpeg");
            -webkit-background-size: cover;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            height: 100vh;
        }
        a{
            font-size: 12px;
            text-transform: uppercase;
        }
        .nav-area{
            background: #262626;
        }
        .nav-area:after{
            content: '';
            clear: both;
            display: block;
        }
        .nav-area ul{
            list-style: none;
            margin: 0;
        }
        .nav-area > ul > li{
            float: left;
            position: relative;
        }
        .nav-area ul li a{
            text-decoration: none;
            color: #fff;
            padding: 15px 20px;
            display: block;
        }
        .nav-area ul li:hover a{
            background: #34495e;
        }

        .nav-area ul ul{
            position: absolute;
            padding: 0;
            min-width: 160px;
            display: none;
            top: 100%;
            left: 0;
        }
        .nav-area ul li:hover > ul{
            display: block;
        }
        .nav-area ul ul li:hover a{
            background: #262626;
        }
        .nav-area ul ul li{
            position: relative;
        }
        .nav-area ul ul ul{
            top: 0;
            left: 100%;
        }
        .nav-area ul ul ul li:hover a{
            background: #34495e;
        }