菜单下拉开启bootstrap无法正常工作

Question

我需要下拉菜单。我该怎么做？这就是我的尝试。

这是我的代码

<nav id="navigation" class="cbp-af-header">
    <div class="container">
        <ul id="menu" >
          <li class="current"><a href="/" >Home</a></li>
          <li><a href="{% url 'product' %}">Product</a></li>
          <li ><a href="{% url 'services' %}">Services</a></li>
          <li class="dropdown" id="get_started"> 
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Get Started <b class="caret"></b></a>
            <ul class="dropdown-menu">
               <li><a href="{% url 'request_demo' %}">Demo the Platform</a></li>
           </ul>
         </li>
       </ul>
   </div>
 </nav>

这是jquery

$('#menu li').hover(function () {
    $(this).find('.dropdown-menu').toggle();
});

Answer 1

只需使用CSS

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