title: Hover menu inside a menu
body: <pre><code>  &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot;&gt;
                  &lt;a href=&quot;index.html&quot; class=&quot;navbar-brand display-4&quot;&gt;NintendoWorlds&lt;/a&gt;
                  &lt;button class=&quot;navbar-toggler&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#menu&quot;&gt;
                      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;menu&quot;&gt;
                      &lt;ul class=&quot;navbar-nav&quot;&gt;
                          &lt;li class=&quot;nav-item dropdown&quot;&gt;
                                  &lt;a href=&quot;#&quot; class=&quot;nav-link&quot; data-toggle=&quot;dropdown&quot;&gt;Games&lt;/a&gt;
                                  &lt;ul class=&quot;dropdown-menu&quot; &gt;
                                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Latest&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Best Selling&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Our Pick&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                          &lt;/li&gt;
  @media all and (min-width:992px){
      .navbar .nav-item .dropdown-menu{display:none;}
      .navbar .nav-item:hover .dropdown-menu{display:block;}
      .navbar .nav-item .dropdown-menu{margin-top:0;}
  }
  ul.dropdown-menu a.dropdown-item{
      padding: 14px;
      margin: 8px;
  }
  </code></pre>
  <p>I want to display a menu when I hover the mouse over &quot;Our Pick&quot;. Can you guys show me how to do it?</p>