Question

Trying to use Twitter Bootstrap’s (2.0) Dropdown menu.

But somewhy it adds additional empty a elements making it looke very weird:

See the example.

The questions:

1. Why is it happening (what am I doing wrong)?
2. How to fix it?

Thanks.

Answer 1

You’re not properly closing your “Contacts” menu item so the markup is being displayed as if the dropdown menu was part of your main link. Just add a closing </a> tag at the end of the .caret div and it works:

<ul class='nav nav-tabs'>
  <li><a href="/dashboard">Dashboard</a></li>
  <li class='dropdown'>
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
      Contacts
        <b class='caret'></b></a> /* here */
      <ul class='dropdown-menu'>
        <li><a href="/x">Staff</a></li>
        <li><a href="/x">Networks</a></li>
      </ul>
    </a>
  </li>
</ul>

Demo: http://jsfiddle.net/rCFGY/1/