Question

我正在尝试使用引导程序创建一个下拉菜单，当鼠标悬停在导航栏菜单中的按钮上时，子菜单会自动出现，当按下它时会转到另一个不同的页面：我尝试了以下代码，但子菜单崩溃了只需点击父按钮：

<ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="index.htm">Home</a></li>
                    <li class="dropdown">
                        <a  class="dropdown-toggle" data-toggle="dropdown" href="services.htm">Services <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="tourism/tourism.htm">Tourism</a></li>
                        <li><a href="trade/trade.htm">International Trade</a></li>
                        <li><a href="heath/health.htm">Health Care</a></li>
                        <li><a href="real_/real-esate.htm">Real Estate</a></li>
                        <li><a href="#">Invesment</a></li>
                        <li><a href="#">Legal Process</a></li>
                        <li><a href="#">Other Services</a></li>
                    </ul>
                    </li>
                    <li><a href="read.htm">About</a></li>
                    <li><a href="contact.htm">Contact</a></li>
                </ul>

添加以下css代码时：

ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;    
   }

子菜单只是通过将鼠标悬停在服务按钮上而折叠，但是当按下服务按钮时，浏览器仍然无法将我带到页面services.htm，如楼上的情况所示。这个案子怎么解决？

Answer 1

试试这个css：

ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;   
position: absolute;
top: 23px; 
}

ul.nav li.dropdown ul.dropdown-menu {
display:none;
position: absolute;
top: 23px;
}

使用父按钮自动下拉，将您带到引导程序中的另一个页面

1 个答案: