bootstrap子菜单父级背景在其子菜单项的悬停时变为黑色

Question

我使用子菜单实现了正常的bootstrap下拉列表。当我将鼠标悬停在＆＃34; safdgs＆＃34;等下拉元素上时和＆＃34; lplplp＆＃34;背景变得有点灰，这是完美的

但当我将鼠标悬停在名为new folder的子菜单项上时，＆＃34; lplplp＆＃34;菜单项变黑。我不希望这种情况发生。

我该如何解决这个问题？当我将鼠标悬停在子菜单上时，为什么父母会变黑？此外，我将此下拉列表连接到黑色导航栏（通过navbar-inverse类），因此我想要一个仅针对上述场景的解决方案，因为当屏幕较小时，下拉列表行为正常... < / p>

基本理念：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="javascript:void(0)" data-toggle="dropdown" data-target="#">Dropdown Button</a>
                <ul  class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="width:300px">
                        <li class="dropdown-submenu dropdown-submenu-bookmark">
                            <a tabindex="-1" href="" >
                                <i class="fa fa-folder-o fa-1x padding-right-10px"></i>
                                Parent Drop 1
                            </a>
                             <ul style="width: 300px" class="dropdown-menu bookmarkDrop">

                              <li><a tabindex="-1" href=""><i class="fa fa-file-image-o fa-1x padding-right-10px"></i>New Folder 1</a></li>
                              <li><a tabindex="-1" href=""><i class="fa fa-file-image-o fa-1x padding-right-10px"></i>New Folder 2</a></li>
                              <li><a tabindex="-1" href=""><i class="fa fa-file-image-o fa-1x padding-right-10px"></i>New Folder 3</a></li>

                            </ul>

                        </li>
                </ul>
            </li>
        </ul>
    </div>
</div>