How to Create Drop Down Navigation Menu with CSS and HTML

byCodingFlicks -July 01, 2021

0

Hello friends, in this blog, I am sharing another simple code snippet based on How to Create Dropdown Navigation Menu with CSS and HTML. Previously I have lots of snippets on CSS animation examples and javascript. Please make sure to check those out as well.

I think you all have heard about the dropdown navigation bar. A list of the link below the main menu appears when the user hovers over any main menu items. It is an extension of the main menu. If the websites have many pages, then it is required to link each page with the main menu. It is for the convenience of the users that are visiting any particular website.

With this snippet, you will learn How to Create a Dropdown Navigation Menu with HTML and CSS. This particular project will be helpful for those who are learning HTML and CSS and trying to make it to the dropdown menu on their own. You can use this snippet in your project after doing some alterations by yourself.

You may also like:

I have taken a fundamental nav element with a class of 'nav-area' in the HTML markup. Inside of it, I have taken an unordered list with five nav elements. Under the 'services' item, I have created the dropdown menu with necessary nav items. You can put yours while you modify it by yourself.

In the CSS part, first, I gave the body tag a background image and a height of 100vh. I have adjusted the default margin and padding by giving them a value of zero. Later I gave the li element a relative position value and styled the elements with some basic CSS styles. For the unordered list under the main list, I gave it a position absolute value and gave it a width of 160px. Initially, the display property will be none for the dropdown ul element, but the display will be' block' when we hover over the related nav item. Without further explanation, I am providing the code below to have a look by yourself.

How to Create a Dropdown Menu in HTML and CSS [ Source Code ]:

For creating the snippet, you will need to make two files. One is HTML, and the other is CSS. after creating the files, link the CSS file in the HTML file. Please copy the code below and paste them into your file and save it. Open it in your browser and make the necessary adjustment according to your wish.

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("https://i.postimg.cc/zfn5wLYT/2.jpg");
            -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;
        }

I hope you like this simple snippet. If so, please share the articles on this blog. Follow us on our social media profiles to stay connected with this blog. Thank you for stopping by this website. I hope you will visit again soon.

Please do not enter any spam link in the comment box.