将 html 转换为 wordpress 下拉菜单

Question

这里是html结构：

<div class="collapse navbar-collapse main-menu-item justify-content-end" id="navbarSupportedContent">
  <ul class="navbar-nav align-items-center">
    <li class="nav-item"><a class="nav-link" href="/index.php"><i class="ti-home"></i></a></li>
    <li class="nav-item"><a class="nav-link" href="/page2.php">Page 2</a></li>
    <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News</a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="/news/blog.php">Blog</a>
         <a class="dropdown-item" href="/news/press.php">Press</a>
       </div>
    </li>
  </ul>
</div>

我能够通过 wp 显示菜单。但是还有一点需要解决：下拉菜单。知道我应该做什么吗？

如何通过菜单显示li、div和a下拉类？

下拉菜单出现在页面上，但在我将鼠标悬停在其上之前应该隐藏，不是吗？

我应该使用 Jquery 还是通过 wp 函数来执行此操作？我有点失落。

感谢您的帮助。