title: Dropdown Subcategories in WooCommerce
body: <p>By default WooCommerce show my categories and subcategories like the image I am posting. </p>
  
  <p><a href="https://i.stack.imgur.com/BJU4s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BJU4s.png" alt="enter image description here"></a></p>
  
  <p>Is it possible to hide the subcategory Test and only show the Test sub category when you click the main category which is Furniture?</p>
  
  <p>Here is the html code for my page and the CSS I have used:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>aside#woocommerce_product_categories-2 ul li:nth-child(4) ul {
      display: none; 
  }
      
  aside#woocommerce_product_categories-2 ul li:nth-child(4):hover &gt; ul {
      display:block
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;aside id="woocommerce_product_categories-3" class="widget woocommerce widget_product_categories"&gt;
       &lt;h5 class="widgettitle"&gt;Product Categories&lt;/h5&gt;
       &lt;ul class="product-categories"&gt;
            &lt;li class="cat-item cat-item-28"&gt;&lt;a href="http://saltandpepper.workshopcy.com/product-category/accessories/"&gt;accessories&lt;/a&gt;&lt;/li&gt;
            &lt;li class="cat-item cat-item-29"&gt;&lt;a href="http://saltandpepper.workshopcy.com/product-category/clothes/"&gt;clothes&lt;/a&gt;&lt;/li&gt;
            &lt;li class="cat-item cat-item-30"&gt;&lt;a href="http://saltandpepper.workshopcy.com/product-category/flowers/"&gt;flowers&lt;/a&gt;&lt;/li&gt;
            &lt;li class="cat-item cat-item-38 cat-parent current-cat-parent"&gt;&lt;a href="http://saltandpepper.workshopcy.com/product-category/furniture/"&gt;Furniture&lt;/a&gt;
                 &lt;ul class="children"&gt;
                      &lt;li class="cat-item cat-item-41 current-cat"&gt;&lt;a href="http://saltandpepper.workshopcy.com/product-category/furniture/test/"&gt;Test&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="cat-item cat-item-31"&gt;&lt;a href="http://saltandpepper.workshopcy.com/product-category/home-furnishings/"&gt;home furnishings&lt;/a&gt;&lt;/li&gt;
            &lt;li class="cat-item cat-item-32"&gt;&lt;a href="http://saltandpepper.workshopcy.com/product-category/souvenirs/"&gt;souvenirs&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
  &lt;/aside&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works but I am not sure if this will be a viable option if you have too many categories and subcategories and products... </p>
  
  <p>Thank you for your help. </p>