How to Make Dynamic Dropdown Menu on WordPress

Make dropdown menu for your WordPress theme if you don’t like using any type of plugins, So you can easily create menu and submenu with dropdown icon. Use our simple functions.php’s and style.css’s code.

How to Do

• Open functions.php file and add or paste code there.

register_nav_menus(
array(
'menu-1' => esc_html__( 'Primary', 'thekroyaard_spl' ),
)
);

---

• Now paste given code where you want to show menu.

<nav id="site-navigation" class="main-navigation" rel="nofollow">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_class' => 'primary-menu',
)
);
?>
</nav>

---

• Use our CSS code for designing

.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
font-weight: bold;
font-size: 110%
}
.sub-menu a{
font-size: 100%;
}

.primary-menu > li {
    display: inline-block;
    position: relative;
}
.primary-menu > li:hover ul {
    display: block;
    animation: fadeIn 0.3s ease;
}
.primary-menu > li:has(ul) > a:after {
    content: '▼';
    display: inline-block;
    margin-left: 12px; 
font-size: 60%
}
.primary-menu ul li:has(ul) > a:after {
    content: '▸';
    display: inline-block;
    margin-left: 10px;
    font-size: 100%;
}
.primary-menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    background-color: #262626;
    z-index: 999;
margin:0;
list-style: none;
font-size: 90%;
}
   .primary-menu ul ul {
            top: 0;
            left: 100%;
            padding: 0;
font-size: 100%
        }
.primary-menu ul li > ul li{
    display: none;
}
.primary-menu ul li:hover ul li{
    display: block;
    animation: fadeIn 0.3s ease; 
}
.primary-menu ul li {
    background-color: #262626;
    z-index: 999;
border-bottom: 2px solid
}
.primary-menu a {
width: max-content;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #fff; 
    transition: background-color 0.3s ease; 
}

.primary-menu a:hover,
.primary-menu a:active,
.primary-menu li:hover,
.primary-menu li:active,
.primary-menu ul li:hover > a,
.primary-menu ul li:active > a,
.primary-menu ul ul li:hover > a,
.primary-menu ul ul li:active > a,
.primary-menu ul li.active > a, 
.primary-menu ul ul li.active > a {background-color: #b50000;
}
/* Fade-in animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Use these code on your WordPress custom theme. Hope this code will work perfectly.

Watch Video