如何在悬停而不是onclick上进行Bootstrap Vue导航栏下拉菜单？

Question

我正在使用Bootstrap Vue插件制作导航栏，在线查找，我只在Bootstrap中看到了解决方案，而不是Boostrap Vue，并且我正在努力尝试使其适应我的代码，因为Bootstrap下拉列表通常具有div，然后一个按钮，然后是一个列表组，然后li项目和bootstrap vue用更少的代码完成了同样的事情，所以我不确定将所需的mod放在哪里

<b-navbar toggleable="lg" fixed class="mx-5">
    <div class="d-flex align-items-center justify-content-between">
        <b-navbar-toggle target="nav-collapse" class="navbar-toggler navbar-toggler-left"></b-navbar-toggle>

        <b-navbar-brand href="#" class="ml-5">
            <b-img fluid src="/img/logo/Logo.png" class="mt-4"></b-img>
         </b-navbar-brand>
                </div>


                <b-collapse id="nav-collapse" is-nav>

                    <b-navbar-nav class="ml-auto">
                        <b-nav-item-dropdown class="mydropdown" text="Something"right>

                            <b-dropdown-item href="#" >Option 1</b-dropdown-item>
                            <b-dropdown-item href="#" >Option 2</b-dropdown-item>
                        </b-nav-item-dropdown>

                </b-collapse>
            </b-navbar> 

<style>
/*not working
.mydropdown:hover .mydropdown-dropdown-item {
  display: block;
}
*/
</style>