title: CSS drop down menus links not working
body: <p>I'm trying to get a drop down menu to work with this button so far it's all going well, but when I click on the menu and try to click one of the link's it closes the drop down menu instead of opening the link. Any ideas? (I know there's a way to format this post to have you be able to test the code in this browser, but I'm not sure how to do that)</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"/&gt;
          &lt;title&gt;index&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="css.css"/&gt; 
      &lt;/head&gt;
      &lt;body&gt;
          &lt;nav class="nav-main"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#" class="nav-item"&gt;&lt;img src="images/resume btn.jpg"/&gt;&lt;/a&gt;
                      &lt;div class="nav-content"&gt;
                          &lt;div class="nav-sub"&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="www.google.com"&gt;Acting&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="www.youtube.com"&gt;Choreographer/Dancer&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;   
          &lt;/nav&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code>.nav-main .logo{
      height:40px;
      font-size:1.4em;
      line-height:40px;
  
  }
  
  .nav-main &gt; ul{
      list-style-type:none;
  
  }
  
  .nav-main &gt; ul &gt; li{
      float:left;
  
  }
  
  .nav-content{
      overflow:hidden;
      background-color:tan;
      max-height:0;
  
  }
  
  .nav-content a{
  color:black;
  text-decoration:none;
  
  }
  
  .nav-content a:hover{
      text-decoration:underline;
  
  }
  
  .nav-sub ul{
      padding:0;
      margin:0;
      list-style-type:none;
  }
  
  .nav-sub ul li a{
      display:inline-block;
      padding:5px;
  }
  
  .nav-item:focus ~ .nav-content{
      max-height:400px;
      -webkit-transition:max-height 0.4s ease-in;
      -moz-transition:max-height 0.4s ease-in;
      transition:max-height 0.4s ease-in;
  }
  </code></pre>