title: CSS for sub-menu on navigation bar not working
body: <p>I am working on a site and have created a navigation bar with sub-items but I am not getting these sub-items display on hover.
  Here's my HTML and CSS code for the navigation bar:</p>
  
  <pre><code> &lt;div class="collapse navbar-collapse" id="spi-primary-nav"&gt;
        &lt;ul class="nav navbar-nav"&gt;
           &lt;li id="menu-item-9265" class="home-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9001 current_page_item menu-item-9265"&gt;
               &lt;a href="index.html"&gt;Home&lt;/a&gt;
           &lt;/li&gt;
           &lt;li id="menu-item-9004" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9004 "&gt;
               &lt;a href="Default.aspx"&gt;Store&lt;/a&gt;
               &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Sub Menu 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Sub Menu 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Sub Menu 3&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
           &lt;/li&gt;      
       &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>The CSS is here:</p>
  
  <pre><code>.navbar-nav &gt; li &gt; ul {
      display: none;
      position: absolute;
  }
  .navbar-nav &gt; li &gt; ul:hover {
      display:block;
  }
  </code></pre>
  
  <p>Here is the live link of the site in case someone wants to inspect the elements using Firebug:
  <a href="http://webcalendar.pcprosinc.com/Home" rel="nofollow">http://webcalendar.pcprosinc.com/Home</a></p>
  
  <p>Please help me out</p>