Question

I have a navbar dropdown that when highlighted, shows an extra caret. It occurs on each highlighted option in the navbar.

Here is my code:

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Username
            <i class="caret"></i> 
        </a>
        <ul class="dropdown-menu">
            <li><a href="/user/dashboard"><i class="icon-home"></i> Dashboard</a></li>
            <li><a href="/username"><i class="icon-user"></i> Profile</a></li>
            <li class="divider"></li>
            <li><a href="/logout" data-method="delete" rel="nofollow">Logout</a></li>
        </ul>
    </li>
</ul>

Answer 1

Try this HTML, works fine for me (Google Chrome):
http://jsfiddle.net/CpQVb/