title: Dropdown menu links show on Focus
body: <p>Can't seem to get the dropdown links to show (on focus) on when tabbing with the keyboard. Tried a couple different styles, but no luck. Any help would be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
     background: #005bbb;
     font: 14px Sofia,Arial,sans-serif;
      color: #444;
      height: 100%;
      line-height: 1;}
  
  .nav-global a {text-decoration: none}
  
  .nav-global ul li {
      color: #005bbb;
      float: left; 
   display: inline; 
   position: relative; 
   margin: 0;
   width: 235px}
   
  .nav-global ul li:hover {
   background-color: #003e51;}
  
   
  /* style the first level slightly different */
  
  .nav-global &gt; ul &gt; li {
   margin: 0;
   width: auto;
   background: #fff;
   color: #005bbb}
  
  .nav-global ul li a {
   color: #005bbb;
   padding: 12px 16px 14px 16px;
   display: block; 
   font: 15px Sofia Bold, "Trebuchet MS", sans-serif;}
   
  .nav-global ul li a:hover {
   color: #fff}
   
  .nav-global &gt; ul &gt; li &gt; a {}
  
  .nav-global li:hover &gt; a  {color: #fff} 
   
    
  /* ----------------------------------------------- secondary nav ----------------------------------------------- */
  
  
  
  
  .nav-global ul li ul {
   position: absolute;
   max-height: 0; 
   overflow: hidden; 
   margin: 0; 
   opacity: 0;}
  
  .nav-global ul li:hover &gt; ul {
   max-height: 1000px; 
   overflow: visible; 
   opacity: 1;}
   
  .nav-global ul li ul li {
   background-color: #003e51;}
   
  .nav-global ul li ul li a {
   color: #fff;
   font: 13px Sofia, "Trebuchet MS", sans-serif;
   padding: 0;
   line-height: 30px;
   text-indent: 15px;}
  
  
  .nav-global ul li ul li a:hover {
   background: #002935;}
  
  .nav-global ul li ul li:first-child {
   padding-top: 10px}
  
  .nav-global ul li ul li:last-child {
   padding-bottom: 10px}
  .</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-main"&gt;
  &lt;nav class="nav-global"&gt;
  
      &lt;ul&gt;
       &lt;li&gt;&lt;a href="/findmaterials" class="find"&gt;Find Materials&lt;/a&gt;
       
        &lt;ul&gt;
        &lt;li&gt;&lt;a href="/findmaterials/everything"&gt;Everything&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="http://catalog.lib.buffalo.edu/"&gt;Catalog&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/findmaterials/databases"&gt;Databases&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/findmaterials/ebooks"&gt;E-Books&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="http://ll3md4hy6n.search.serialssolutions.com"&gt;E-Journals&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/reserve"&gt;Course Reserve&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/off-campus"&gt;Off Campus Access&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
            &lt;/ul&gt;
     
     
     
     &lt;/nav&gt;
      &lt;/div&gt;
   =</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried using the code like this for "on focus", but not working:</p>
  
  <pre><code>.nav-global ul li:focus &gt; ul {
  max-height: 1000px; 
  overflow: visible; 
  opacity: 1;}
  </code></pre>