title: CSS dropdown not working on iOS Safari?
body: <p>I have this navigation setup below with the CSS below that. I'm having issues with this navigation working within iOS Safari and I can't figure out why. It currently works perfectly fine in IE, Firefox and Chrome. The navigation looks fine on iOS but I can't get the dropdown to work in iOS at all.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="localhost"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;Nav One
              &lt;ul class="drop-nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;Nav Two
              &lt;ul class="drop-nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>nav {
      display: flex;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex; 
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      margin: 40px 0 0;
      font-size: 12px;
  }
  
  .dropdown {
      text-transform: uppercase;
      font-family: "Montserrat",sans-serif;
      display: block;
      cursor: pointer;
      transition: color 0.3s ease-in-out;
      color: #423D39;
  }
  
  .dropdown:hover {
      color: #e16086;
  }
  
  .drop-nav {
      background: #D3AE95;
  }
  
  nav a {
      text-decoration: none;
      text-transform: uppercase;
      display: block;
      color: #423D39;
      font-family: 'Montserrat', sans-serif;
      transition: all 0.6s ease-in-out;
  }
  
  nav a:hover {
      color: #e16086;
  }
  
  nav ul li ul li {
      width: 160px;
      padding: 10px;
      font-size: 12px;
  }
  
  nav ul {
      display: flex;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex; 
      list-style: none;
      margin: 0;
  }
  
  nav ul ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
  }
  
  nav ul li:hover &gt; ul {
      display: block;
      border: 1px solid rgba(255,255,255,0.4);
  }
  
  nav li {
      position: relative;
      margin: 0;
      padding: 0 7px;
  }
  </code></pre>
  
  <p>Thanks.</p>