title: Change hover dropdown with click in CSS?
body: <p>I have some dropdown in css that is now made in css like this</p>
  
  <pre><code>.menu ul ul,
  .menu .mega-menu,
  .menu .mega-menu ol li {
      opacity: 0;
      visibility: hidden;
  }
  
  
  .menu li:hover &gt; ul,
  .menu li:hover &gt; .mega-menu,
  .menu li:hover &gt; .mega-menu ol li {
      opacity: 1;
      visibility: visible;
  }
  </code></pre>
  
  <p>Can i change it css to be on click maybe with :target?</p>
  
  <p>Tried with</p>
  
  <pre><code>.menu li:focus &gt; ul,
  .menu li:focus &gt; .mega-menu,
  .menu li:focus &gt; .mega-menu ol li {
      opacity: 1;
      visibility: visible;
  }
  </code></pre>
  
  <p>Does not work</p>
  
  <pre><code>           &lt;div class="menu menu-style"&gt;
                  &lt;ul class="menu brand-background"&gt;
                      &lt;li class="menu-active"&gt;A&lt;/li&gt;
                      &lt;li&gt;B&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;C&lt;/a&gt;
                          &lt;!-- Full Width Mega-Menu / Start --&gt;
                          &lt;div class="mega-menu full-width"&gt;
                              &lt;div class="col-md-1"&gt;
                                  &lt;h4&gt;Content&lt;/h4&gt;
                                  &lt;ol&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ol&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- Full Width Mega-Menu / End --&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/li&gt;                            
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>