Create a Navigation Bar With Primary and Secondary Drop Down Menu With Hover Effect using HTML & CSS

 Navigation bar is a primary component of a good website. This bar navigate the visitors about the website. So a navigation bar should be attractive also it need to contain more informative connections about the website.

Primary Menu

A primary menu is that menu which contain the most important and mostly used links of that website or it gives users the most important components location for easy to use.

A primary menu should br located in top or bottom but it should be very eye catchy for visitors thats why visitors can easily access this navigation system.

Secondary Menu

If primary menu can't contain so much content then the secondary menu need to apply. Secondary menu may be in Hover location of primary menu or it could be in the opposite side of a primary menu.

How we can create a menu using hover or how we can create a drop down menu ?

Here in this article i explain and provide the source code of a dropdown menu using HTML, CSS

Drop Down Menu HTML Code

 <div id="refatnav">

        <ul class="reffatnavul">

<li class="reffatnavli">

Home

</li>

<li class="reffatnavli">

    About

    </li>

    <li class="reffatnavli">

        Contact

        </li>

        <li class="reffatnavlic">

            Category

            <ul class="reffatnavliul">

                <li class="reffatnavliulli">

                    Sub

                </li>

                <li class="reffatnavliulli">

                    Sub

                </li>

                <li class="reffatnavliulli">

                    Sub

                </li>

                <li class="reffatnavliulli">

                    Sub

                </li>

                <li class="reffatnavliulli">

                    Sub

                </li>

            </ul>

            </li>

            <li class="reffatnavli">

                Policy

                </li>

        </ul>

    </div>

in this html code first un ordered list is for main menu and the 2nd ul tag is for drop doen menu.

So now this code shows all the tag in a list and it isn't a proper menu bar. So we need proper css codes for make a perfect drop down menu bar.

Drop Down Menu CSS Code

 *{

           padding: 0;

           margin: 0;

           

        }

        li{

            list-style: none;

        }

.reffatnavul{

    display: flex;

   justify-content: space-evenly;

}

.reffatnavliul{

    display: none;

}

.reffatnavlic:hover .reffatnavliul{

   display: block;

}

In between <style></style> tag you add this css code or you can create a different style.css file for this code. 

This code will hide the drop down menu at first and display the secondary menu when you hover in category section your mouse.

This is a very basic and clear viewed code of a dropdown menu. You can easily stylize more effectively using more css styles.

I hope now you can easily create the dropdown menu for your first website. rayhanrefat.com try to make codes for beginner web developers so feel free to share your query in our comment box below.