title: Focus on absolute element
body: <p>I have a button witch shows only when the parent(<code>parent-class</code>) element is hover. The parent-class has <code>position:relative</code>, and the button has <code>absolute:position</code>. It's works fine.</p>
  
  <p>Now i want to have a drop down list witch appears only when i click the button.</p>
  
  <p>I try to set the <code>absolute:position</code> and <code>display:none</code> to dropdown-list class, and display the dropdown only when i focus the button.
  But it's not working.</p>
  
  <p>This is an example code:</p>
  
  <pre><code>&lt;div class="parent-class"&gt;
     &lt;button class="btn" &gt;button&lt;/button&gt;
     &lt;ul class="dropdown-list"&gt;
      &lt;li &gt; content1&lt;/li&gt;
      &lt;li &gt; content1&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  
  .parent-class{
   position: relative;
  }
  
  .parent-class:hover .btn{
   display:block;
  }
  
  .btn{
   position:absolute;
   display:none;
  }
  
  .btn:focus .dropdown-list{
   display: block;
  }
  
  .dropdown-list{
  position: absolute;
  display: none;
  }
  </code></pre>
  
  <p>Also i used Angular 2, so if there is a way to resolve this with angular 2 it would be perfect</p>