title: Twitter Bootstrap Responsive Menu adding Weird arrows on Dropdown
body: <p>I don't understand why this is happening with my responsive twitter bootstrap nav. Here's a screenshot:</p>
  
  <p><a href="https://www.evernote.com/shard/s3/sh/79b436f8-822c-4fdc-ad36-a1d706686d05/3a735fc948474e109c08b773f01f0cf8" rel="nofollow">https://www.evernote.com/shard/s3/sh/79b436f8-822c-4fdc-ad36-a1d706686d05/3a735fc948474e109c08b773f01f0cf8</a></p>
  
  <p>It's adding those weird arrows that point up. The carets are intended and those are ok. It goes away if I remove all of the <code>dropdown</code> classes from the <code>&lt;li class="dropdown"&gt;</code>. But doing that breaks the nav. Otherwise the nav is working great. Here's my markup:</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-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;/a&gt;
        &lt;%= link_to "Tip Share", root_path, :class =&gt; "brand" %&gt;
  
        &lt;div class="nav-collapse"&gt;
  
                  &lt;ul class="nav pull-left"&gt;
                      &lt;% if current_user %&gt;
                          &lt;li class="dropdown"&gt;
                            &lt;a href="#"class="dropdown-toggle" data-toggle="dropdown"&gt;
                              Sales
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                            &lt;/a&gt;
                            &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;%= link_to "New Sales", new_sale_path  %&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;%= link_to "Manage Sales", sales_path  %&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/li&gt;
  
                          &lt;li class="dropdown"&gt;
                            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                              Shifts
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                            &lt;/a&gt;
                            &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;%= link_to "New Shift", new_shift_path %&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;%= link_to "Manage Shifts", shifts_path %&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/li&gt;
  
                          &lt;li class="dropdown"&gt;
                            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                              Employees
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                            &lt;/a&gt;
                            &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;%= link_to "New Employee", new_employee_path %&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;%= link_to "Manage Employees", employees_path %&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/li&gt;
  
                          &lt;li class="dropdown"&gt;
                            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                              Positions
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                            &lt;/a&gt;
                            &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;%= link_to "New Position", new_position_path %&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;%= link_to "Manage Positions", positions_path %&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;% end %&gt;
                  &lt;/ul&gt;
  
                  &lt;ul class="nav pull-right"&gt;
                      &lt;% if current_user %&gt;
                          &lt;li&gt;
                          &lt;%= link_to root_path do %&gt;
                          &lt;%= current_user.email %&gt;
                      &lt;% end %&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;%= link_to 'Log out', logout_path %&gt;&lt;/li&gt;
                      &lt;% else %&gt;
                      &lt;li&gt;&lt;%= link_to 'Sign up', signup_path %&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%= link_to 'Log in', login_path  %&gt;&lt;/li&gt;
                    &lt;% end %&gt;
                  &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It seems like there's nothing wrong with this markup, but I keep getting these little arrows. I'd rather figure what I'm doing wrong with bootstrap than try to override it with css</p>
  
  <p>How do I get rid of these arrows? </p>
  
  <p>FYI, I'm using the bootstrap-sass gem to import twitter bootstrap.</p>