How To Create Drop Down Menu In HTML and CSS

How To Create Drop Down Menu In HTML and CSS

Here's how to create a dropdown menu bar using HTML and CSS programming code. Earlier I designed many types of menu bars. Hopefully, you will like this design like the others. You will notice that all the websites have menubars. This menu bar helps to enhance the quality and beauty of your website.


What is Drop-down Menu Bar?

The dropdown menu bar is an element of your website that allows you to display many of your web pages in one place. Such graphic elements are designed using HTML and CSS programming. 

This is undoubtedly beautiful enough and will help to increase the quality of your website a lot. There are many types of menubars today, one of them being the top menu bar. Here I have basically made the top menu bar and with it, I have made three types of sub-menubars. 

As a result, you can arrange a large number of pages in the menu bar.


Video tutorial of the dropdown menu bar

 You can watch the video tutorial below to know more. There I said nicely and showed step by step how this dropdown menu was created. If you want to know which programming code has been used to create an element, you can definitely watch the video below. 


Hopefully by watching the video above you have fully learned how to make it.


Some information about this menu bar

Basically, I used two types of programming code to make it. One is the HTML that helped build the structure of this menu bar. The other is the CSS programming code that helped design it.

 A multi-step dropdown has been used for this menu bar. If you look at the image above, you will understand that here I have used a colorful image in the background and blue in the menus. I used black for the hover effect. 

This means that I am designing this menu bar using blue and black colors.

Other projects related to this project

Below are some other posts related to this post. In the meantime, I have designed many more types of menubars such as side menu bar top menu bar pop-up menu bar, etc. Its links are given. Using these, you can learn how to create menubars of other designs.

👉Create Navigation Menu Bar

👉Responsive Navigation Menu bar

👉Personal Portfolio Website Tutorial

👉Sidebar Menu Using HTML CSS


How this drop-down menu bar was created

You can download the source code required to create it by clicking on the download button above. You can also copy the HTML and CSS codes below and use them in your project. Add the HTML code below in the body section and the CSS code in the head section.

HTML Code:

<div id="container">
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">WordPress</a>
                <!--Fridt Tier Drop Down-->
                <ul>

                    <li><a href="">Theme</a></li>
                    <li><a href="">Plugins</a></li>
                    <li><a href="">Tutorials</a></li>

                </ul>
                <li><a href="">Web Design</a>
                
                    <!--First Tier Drop Down-->
                    <ul>


                        <li><a href="">Resource</a></li>
                        <li><a href="">Links</a></li>
                        <li><a href="">Tutorials</a>
                        
                            <!--Second Tier Drop Down-->

                            <ul>

                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">Outher</a>
                                
                                    <!-- Third Tier Drop Down-->
                                    <ul>

                                        <li><a href="">Stuff</a></li>
                                        <li><a href="">Things</a></li>
                                        <li><a href="">Outher Stuff</a></li>

                                    </ul>
                                
                                </li>

                            </ul>
                        
                        </li>

                    </ul>
                
                </li>
                <li><a href="">Graphic Design</a></li>
                <li><a href="">Inspiration</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">About</a></li>
            </ul>
        </nav>
    </div><!--End HTML Code-->

CSS Code:

 
html{
    background-image: url(image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 700px;
    background-position: center;
}
body{
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    font-family: 'Open Sans',sans-serif;
}
nav{
    background-color: #1289dd;
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
nav ul li{
    display: inline-block;
    background-color: #1289dd;
}
nav a{
    display: block;
    padding: 0 10px;
    color: #fff;
    line-height: 60px;
    font-size: 20px;
    text-decoration: none;
}
/* Hide Dropdown by Default*/
nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
}
/* hover */
nav a:hover{
    background-color: #000000;
}
/* Display Dropdown on Hover */
nav ul li:hover > ul {
    display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li{
    width: 170px;
    float: none;
    display: list-item;
    position: relative;

}

/* ============ Second, Third and More Tiers ===========*/
nav ul ul ul li {
    position: relative;
    top: -60px;
    left: 170px;
}

/* Change this in order to change the Dropdown symbol */
li > a::after { content: ' +';}
li > a:only-child::after {
    content: '';
}


Thank you, Please Visit again


Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.