title: How to keep parent displayed when child is focused?
body: <p>I'm trying to make a 3 level (or more) clickable menu, but I noticed that when I click a child, parent and his siblings hide. I would like parent and his siblings to stay displayed when children are focused. Is that possible only using CSS? Here is my code:</p>
  
  <pre><code>&lt;style&gt;
  .menu{
    background: green;
  }
  .menu ul{
    padding: 0;
    margin: 0;    
  }
  .menu ul ul{background: rgba(0,0,0, .2);}
  .menu &gt;ul&gt;li&gt;a{  line-height: 50px; }
  
  .menu li{
    list-style: none; 
  
    position: relative;
    border-bottom: solid 1px #009900;
  }
  
  .menu a:not(:only-child):after {
      padding-left: 5px;
      content: '\25BC' ' ';
  }
  
  
  
  .menu li:last-child{border: none;}
  .menu li a{
    color: #fff;
    text-decoration: none;
    padding: 0 20px;
    display: block;
    text-transform: uppercase;
  }
  
  /* Level 2*/
  .menu ul &gt; li &gt; ul &gt; li &gt; a{display: block;
  line-height: 0px;
  overflow:hidden;
    -webkit-transition: all .4s ease-in-out;
  
  }   
  .menu ul&gt;li&gt;a:focus +ul&gt;li&gt;a{
      color:red;
      line-height:50px;
        -webkit-transition: all .4s ease-in-out;
  }       
  
  /* Level 3+ */
  .menu li ul ul{ top:0;}
  
  
  &lt;/style&gt;
  
  
  &lt;html&gt;
  
  
  &lt;div class="menu "&gt;
      &lt;!--Level 1--&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 1-1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 1-2&lt;/a&gt;
        &lt;!--Level 2--&gt;
            &lt;ul&gt; 
              &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 2-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 2-2&lt;/a&gt;
              &lt;!--Level 3--&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Level 3-1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 3-2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 3-3&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 2-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 1-3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" tabindex="1"&gt;Level 1-4&lt;/a&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a JSfiddle <a href="https://jsfiddle.net/ha3uj465/" rel="nofollow noreferrer" title="example">example</a>.</p>
  
  <p>And the effect I want to achieve is shown <a href="https://jsfiddle.net/yhovdc0n/" rel="nofollow noreferrer" title="here">here</a>. Try hover items to view it.</p>