title: CSS drop down menu to show text area for selection/change
body: <p>I want to show a text area in a drop down menu and to able to change it staying open when the menu is dropped/clicked, here is the code I am trying any idea to make the textarea stay open and active with css?</p>
  
  <p><a href="http://jsfiddle.net/davidgiffo/4p7tc3q8/" rel="nofollow">http://jsfiddle.net/davidgiffo/4p7tc3q8/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class='menu'&gt;
  &lt;!-- list 1 --&gt;
  &lt;li&gt;&lt;a href='#' tabindex='1'&gt;List 1&lt;/a&gt; 
  &lt;ul&gt;
  &lt;textarea rows="5" placeholder="Please put first list here"&gt;&lt;/textarea&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!-- list 2 --&gt;
  &lt;li&gt;&lt;a href='#' tabindex='1'&gt;List 2&lt;/a&gt; 
  &lt;ul&gt;
  &lt;textarea rows="5" placeholder="Please put first list here"&gt;&lt;/textarea&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul { 
      margin: 0; 
      padding: 0; 
      list-style: none;
  }
  a { 
     text-decoration: none; 
  }
  a:focus { 
     outline: none; 
  }
  .menu &gt; li { 
      padding: .3em; 
  }
  .menu ul { 
     padding-top: .5em; 
     display: none; 
  }
  .menu a { 
       display: block; 
  }
  .menu &gt; li &gt; a:after { 
       padding-left: 130px;
       font-size: 1em; 
       content: '▼'; 
  }
  
  .menu a:focus + ul,
   menu a:active + ul {
          display: block;
   } 
  </code></pre>