bootstrap nav-list collapse hover issue

Question

I can't seem to get the hover to function properly (highlight the list item) on a nav-header when inside a nav-list which I has a collapse control as well. Note the nav-header item has to have a link to a page as well as the collapse control, hence the span.

<ul class="nav nav-list">
<li class="nav-header">
    <span>
        <a href="/" title=""><i class="icon-home"></i>Home</a>
        <span class="caret pull-right" data-target="#test" data-toggle="collapse"></span>
    </span>
    <ul class="nav nav-list collapse in" id="test" >
        <li><a href="/ticket_list.cfm" title="Show list of tickets">Open Tickets</a></li>
        <li><a href="/account/" title="Edit user accounts">Accounts / Community</a></li>
    </ul>
</li>
</ul>

http://jsfiddle.net/awjreynolds/2Aucc/3/

Any ideas?

Thank you.

Answer 1

That <span>tag is preventing the highlight effect because the selectors that control these styles are .nav-list > li > a and .nav-list > li > a:hover.
So you can adapt your markup or reproduce that styles with selectors that fit your needs.