title: Why doesn't the dropdown-menu appear in Safari?
body: <p>The following codes work perfectly in Google Chrome or other browsers. But when tested with a safari on an iPhone, the bottom dropdown menu doesn't appear. But when I click on the screen it goes to the menu. The menu is operational but nothing appears on the screen. What is the reason of this? This appears when I add <strong>position: fixed</strong> to the menu. But I don't want it fixed on the screen. Any help, I'd appreciate it.</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>   .navbar-nav {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
      }
      .nav&gt;li {
          position: initial;
          display: block;
          transition: all 0.6s ease;
      }
      #menu div.dropdown-menu {
          margin-left: 0 !important;
          padding-bottom: 10px;
          background-color: #FFF;
          border: none;
          overflow-y: auto;
          border-radius: 0px;
          width: 100%;
      }
      .dropdown_mobile {
          background: #FFF;
          width: 100%;
          min-height: 40px;
          display: inline-table;
          align-items: center;
          transition: all 0.6s ease;
      }
      #menu .dropdown-inner {
          display: flex;
      }
      #menu div.dropdown-inner &gt; ul.list-unstyled {
          display: flex;
      }
      #menu .dropdown-inner li {
          margin: 5px;
          padding-top: 5px;
          padding-bottom: 10px;
      }
      #menu .dropdown-inner a {
          font-family: Century Gothic, sans-serif;
          font-size: 14px;
          font-weight: 600;
          color: #FFF;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;li class="dropdown open"&gt;
                &lt;a href="http://localhost/albigelsin/index.php?route=product/category&amp;amp;path=20" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"&gt;Fruits&lt;/a&gt;
                &lt;div class="dropdown-menu" style=""&gt;
                    &lt;div class="dropdown_mobile"&gt;
                        &lt;div class="dropdown-inner"&gt;                     &lt;ul class="list-unstyled"&gt;
                                                  &lt;li&gt;&lt;a href="http://localhost/albigelsin/index.php?route=product/category&amp;amp;path=20_26"&gt;Apple&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt;&lt;a href="http://localhost/albigelsin/index.php?route=product/category&amp;amp;path=20_27"&gt;Banana&lt;/a&gt;&lt;/li&gt;
                                                &lt;/ul&gt;
                                            &lt;/div&gt;      
                    &lt;/div&gt;
                &lt;/div&gt;
              &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>BOTTOM DROPDOWN MENU WORKS ON GOOGLE CHROME
  <a href="https://i.stack.imgur.com/2tB81.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2tB81.png" alt="enter image description here"></a></p>
  
  <p>BOTTOM DROPDOWN MENU DOESN'T WORK ON SAFARI (iPHONES)
  <a href="https://i.stack.imgur.com/KeyKZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KeyKZ.png" alt="enter image description here"></a></p>