title: nested dropdown menu
body: <p>I am trying to make a nested menu in my nav header. Under Reports there should be two menu items Global Shop and Ndustrios. Then if I hover over either of them there should be more items to show. Currently what happens under Reports is all of the options below it show up when hovered. so it reads: Global Shop, Inventory, Sales Orders, etc.. but Ndustrios doesn't appear.</p>
  <p>Here is what I have tried:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav_ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1D3567;
    text-align: center;
  }
  
  li {
    display: inline-block;
  }
  
  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 24px 16px;
    text-decoration: none;
  }
  
  .dropdown {
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #1D3567;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: White;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown-content ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 75;
  }
  
  .dropdown-content:hover ul {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul id="nav_ul"&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#Reports"&gt;Reports&lt;/a&gt;
        &lt;div class="dropdown-content"&gt;
          &lt;a href="#GS"&gt;Global Shop&lt;/a&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;a href="Inventory.html"&gt;Inventory&lt;/a&gt;
            &lt;a href="sales.html"&gt;Sales Orders&lt;/a&gt;
            &lt;a href="quotes.html"&gt;Quotes&lt;/a&gt;
            &lt;a href="workOrder.html"&gt;Work Orders&lt;/a&gt;
            &lt;a href="prtUsed.html"&gt;Part Where Used&lt;/a&gt;
          &lt;/div&gt;
          &lt;a href="#ND"&gt;Ndustrios&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;nav&gt;</code></pre>
  </div>
  </div>
  </p>