Include CSS triangle in dropdown transition
<p>I have a regular Bootstrap navbar with a toggle button to show the navbar-collapse on click. I added a triangle above the menu so that it points to the hamburger button. I want the dropdown menu button to show with a transition but then there's a second delay until the triangle shows up. How can I get the triangle to show up in the transition the same time the menu does?</p>

<p><a href="http://www.bootply.com/g8d0nLzlIE" rel="nofollow">Bootply</a></p>

<pre><code>  &lt;nav class="navbar navbar-default navbar-static-top"&gt;
      &lt;div class="navbar-header"&gt;

        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;

 &lt;div class="navbar-collapse collapse"&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;All Watches&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt; 
      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"&gt;
      Watches by Brand &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Audemars Piguet&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Bell &amp;amp; Ross&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Blancpain&lt;/a&gt;&lt;/li&gt;  
        &lt;/ul&gt;
    &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li class="visible-xs"&gt;&lt;a href="#" class="green"&gt; &lt;i class="ion-android-arrow-back"&gt;&lt;/i&gt; main site&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

  &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.navbar-collapse.in {overflow-y: visible;}
.navbar-collapse:before {border-bottom: 20px solid #fff; border-left: 20px solid transparent; border-right: 20px solid transparent; top: -10px; content: ""; position: absolute; left: 27px; margin-left: -10px; width: 0;height: 0;}
</code></pre>