javascript - 带有父按钮的自动下拉菜单，可将您带到 Bootstrap 中的另一个页面

Question

我正在尝试使用 bootstrap 制作一个下拉菜单，当鼠标悬停在导航栏菜单中的按钮上时，子菜单会自动出现，当按下它时，它会将您带到另一个不同的页面:我尝试了以下代码，但子菜单崩溃了仅通过单击父按钮:

<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;
}