Navigation Toggle Css

Claudius,

I have a question about 'toggle' class too ;-)

We are re-designing our site main navigation to be a Mega Nav.

Simplified code:

<div class="main-nav">
    <ul>
        <li class="dropdown menu-catID"><a href="#" class="dropdown-toggle">Top Category<i class="fa fa-angle-down"></i></a>


          <div class="dropdown-menu">  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>
                 
                </div>  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>
                 
                </div>  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>                 
                </div> 
            </div>
        </li>
    </ul>
</div>

The question is:

- how to over-write drop-down toggle behavior 'drop on hover' to 'open on click', stay open and close on click?

- how to debug Lithium js to see what I need over-write?

- if I just get rid off 'toggle' class, it messes up everything.

- I tried using Bootstrap, too much work to debugg and layout issues...

note: we have same functionality as Lithium community ;-)