title: A responsive dropdown menu doesn't redirect to external sites
body: <p>I have one more question about my website <a href="http://www.springtribe.de" rel="nofollow noreferrer">www.springtribe.de</a> .</p>
  <p>I have programmed the small responsive dropdown menu for the mobile site - the problem is that the menu doesn't direct me to the third-party websites even though I have put those third-party links into my HTML.</p>
  <p><a href="https://i.stack.imgur.com/l2A8F.png" rel="nofollow noreferrer">For example - You can see the Instagram selected on the right top corner, but my website is stuck with the landing page when it's supposed to be moved onto an Instagram page.</a></p>
  <p>Here are my HTML and CSS for the problem dropdown menu. Any insights on what might have gone wrong appreciated!</p>
  <p><strong>HTML + CSS</strong></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>/* Header */
  header {
    position: fixed;
    z-index: 100;
    width: 100%;
    border-bottom: solid 1px #c6c1c1;
    background-color: white;
  }
  
  header .content {
    display: flex;
    align-items: center;
    padding: 1.875rem;
  }
  
  
  header .site-logo {
    flex: 1;
    width: 60%
  }
  
  header nav ul {
    display: flex;
  }
  
  ul {
    list-style-type: none;
    display: flex;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  
  nav li {
    padding-left: 3.5rem;
  }
  
  nav li:last-child {
    display: flex;
  }
  
  nav a {
    vertical-align: bottom;
    line-height: 1.6;
    font-size: 1rem;
    color: #de6cb6;
  }
  
  nav select {
    display: none;
  }
  
  nav .button {
    padding: .1875rem .5rem;
    background-color: #9dc20b;
    line-height: 1.6;
    color: white;
  }
  
  a:-webkit-any-link {
    cursor: pointer;
  }
  
  header .icon {
    width: 1rem;
    padding-left: .75rem;
    color: #de6cb6
  }
  
  header .mobile {
    display: none;
  }
  
  @media only screen and (max-width: 1200px) {
    
    nav li:last-child {
      display: block;
    }
  
    header .content {
      padding: 1rem 1rem;
    }
  }
  
  @media only screen and (max-width: 1000px) {
    header {
      float: none;
    }
    
    header nav ul {
      display: none;
    }
  
    header nav select {
      display: inline-block;
      width: 100%;
    }
    
  
    header .content {
      padding: .5rem 0;
    }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!-- Header --&gt;
    &lt;header&gt;
      &lt;div class="content" style="height: 60px;"&gt;
        &lt;a href="landingde.html"  class="site-logo"&gt;&lt;img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;"&gt;&lt;/a&gt;
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="impressum.html"&gt;Impressum&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;EN&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="https://www.instagram.com/springtribe.de/?hl=en"&gt;&lt;img class="icon" src="./resources/images/instagram (1.png"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="https://www.linkedin.com/in/florian-zejewski-03653b164/?originalSubdomain=de"&gt;&lt;img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;select&gt;
            &lt;option value="/impressum.html/"&gt;Impressum&lt;/option&gt;
            &lt;option value="/index.html/"&gt;EN&lt;/option&gt;
            &lt;option value="https://www.instagram.com/springtribe.de/?hl=en"&gt;Instagram&lt;/option&gt;
            &lt;option value="https://www.linkedin.com/in/florian-zejewski-03653b164/?originalSubdomain=de"&gt;Linkedin&lt;/option&gt;
          &lt;/select&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>