how to make a dynamic drop down menu with wordpress them development wp_nav_menu

Question

HTML:

<div class="containers">
    <div class="logo">
        <img src="<?php echo  get_theme_mod('webdeveloperjoy_logo') ?> " width="100px">
    </div>
    <ul id="nav">
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li>
            <a href="#">service</a>
            <div class="sub">
                <ul>
                    <li><a href="#">Web design</a></li>
                    <li><a href="#">Web development</a></li>
                    <li><a href="#">Seo</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">Gallery</a>

            <div class="sub">
                <ul>
                    <li><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">four</a></li>
                </ul>
            </div>

        </li>

        <li>
            <a href="#">login</a>

            <div class="sub">
                <ul>
                    <li><a href="#">sign up</a></li>
                    <li><a href="#">five</a></li>
                    <li><a href="#">six</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

CSS:

/*===================================
css strat:
====================================*/

*{  
    padding: 0; 
    margin: 0;  
    box-sizing: 
    border-box;  
    font-family: 'Ms Madi', cursive;
}

.containers {  
    width: 100%;  
    height: 50px;  
    background: red;  
    display: flex;  
    align-items: center  
    justify-content: space-around;  
    position: relative;
}

#nav {  
    display: flex; 
    list-style: none;  
    align-items: center; 
    margin-top: 15px;
}

#nav li a {  
    padding: 0 10px; 
    text-decoration: none; 
    text-transform: uppercase; 
    color: white 
    font-family: 'Oswald', sans-serif;
}

#nav li a:hover {
    background: blue;
    color: white;
    padding: 10px;
}

.sub {
    display: none;
}

ul li:hover .sub {
    display: block;
}

.sub ul {
    position: absolute;
    display: block;
    margin-top: 5px;
    background: red;
    padding: 10px;
}

.sub ul li {
    list-style: none;
    padding: 10px;
}

.sub ul li a {
    color: white;
}

Answer 1

Use WP Bootstrap Navwalker dynamic drop-down menu for WordPress.

https://github.com/wp-bootstrap/wp-bootstrap-navwalker