Question

我正在父菜单中使用Bootstrap导航栏，它应该是onclick

但子菜单应位于悬停左侧，但不起作用

<nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">

                    <ul class="nav navbar-nav navbar-right text-uppercase">
                        <li><a id="Home" href="index.html">Home</a></li>
                        <!-- Visa drapdown-->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>

                            <ul class="dropdown-menu pull-left" role="menu">
                                <li><a href="#">Menu Item 01</a></li>
                                <li><a href="#">Menu Item 01</a></li>
                                <li><a href="#">Menu Item 02</a></li>
                                <li><a href="#">Menu Item 03</a></li>
                                <li><a href="#">Menu Item 04</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>
                                    <ul class="dropdown-menu dropdown-menu-left">
                                        <li><a href="#">Menu Item 01</a></li>
                                        <li><a href="#">Menu Item 01</a></li>
                                        <li><a href="#">Menu Item 02</a></li>
                                        <li><a href="#">Menu Item 03</a></li>
                                        <li><a href="#">Menu Item 04</a></li>
                                    </ul>
                                </li>

                            </ul>

                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
        </nav>

如何解决此问题

在topmenu中，onclick正常，但子菜单应悬停

然后打开左侧

Answer 1

如果要在悬停左侧显示子区域，请在“ .dropdown-menu-left”中间添加“ .dropdown-menu-right”，并将底部样式添加到样式表中

.dropdown-menu-right {右：100％;左：自动； } .dropdown-menu .dropdown：hover .dropdown-menu {display：block;}

Answer 2

只需将此CSS添加到您的样式表中，希望它能工作

.dropdown-menu .dropdown:hover .dropdown-menu { display:block;}

Bootstrap子菜单在悬停时无法打开

2 个答案: