Twitter Bootstrap Navbar Dropdown Hover

Twitter Bottstrap offre di default sia una Navbar che il classico Dropdown.

Se guardate qua vedrete che è anche possibile combinare le due cose.

Il comportamento di default, però, prevede il click per aprire la lista, mentre io voglio aprirla passandoci sopra.

Vediamo come fare.

Partiamo dal codice HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <a class="brand" href="#"></a>
                    <ul id="tab" class="nav">
                        <li class="active"><a href="home.php">Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">DD<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="">Voce 1</a></li>
                                <li><a href="">Voce 2</a></li>
                                <li><a href="">Voce 3</a></li>
                                <li><a href="">Voce 4</a></li>
                            </ul>
                        </li>
                        <li><a href="">Logout</a></li>
                    </ul>
                </div>
            </div>

Come vedete abbiamo una prima voce normale, poi una voce con class="dropdown" che al suo interno ha una seconda lista e prima un link che servirà per aprire la lista (è fondamentale).

Infine un'altra voce normale.