Hi,
I'm trying to make a collapsible nav-list and this is where I have got to:
<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>
<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>
</span>
</li>

It almost works, the only issue being that the nav item that has the Home
link in it does not grey out on mouse over. If I remove the span then the
'caret' appears on the next line. Any ideas?

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

Apologies that was terribly badly formatted:
<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/

On Wed, Sep 12, 2012 at 2:28 PM, Adam Reynolds <awjreyno...@gmail.com>wrote:

FIXED

To fix this issue I used the following css. Running example here
http://jsfiddle.net/awjreynolds/2Aucc/

.nav > li > span:hover {
text-decoration: none;
background-color: #EEE;