Bene. Cerco di spiegarti.
Il problema sta nel fatto che tra il button e l'elemento ul.dropdown-menu c'è uno spazio di qualche pixel dovuto ad un margine di quello stesso ul. Lo stato di hover viene quindi perso quando col puntatore si passa su questo spazio (magari perché il movimento è più lento rispetto ad altre volte, per le quali invece non si presenta il problema). Infatti quello spazio ("essendo vuoto") non reagisce all'hover.
C'è da considerare che questi due elementi stanno dentro il div contenitore dropdown e che l'effetto di visualizzazione del dropdown-menu avviene fintanto che sussiste lo stato di hover sul contenitore. Questo significa che, sia passando (e restando) sul button, sia passando (e restando) su ul.dropdown-menu, viene a verificarsi lo stato di hover del div contenitore (essendo, quei due elementi, contenuti dentro questo).
Bisogna però fare un'ulteriore considerazione. Il dropdown-menu (contenuto nel div dropdown) ha position:absolute. Questa proprietà fa in modo di toglierlo dal normale flusso dei contenuti. Ciò significa che il div contenitore non si estende fisicamente per riuscire a contenere i due elementi andando ad occupare tutta l'area (rettangolare) necessaria a contenere il loro ingombro, ma va invece a "collassare" sul solo elemento button che non ha position:absolute e di fatto sta nel normale flusso dei contenuti.
L'hover ha effetto quindi solo quando il puntatore del mouse si trova precisamente dentro l'ingombro dei due singoli elementi.
Inoltre, il margin di un elemento, a differenza del padding, non è sensibile allo stato di hover.
Come ho indicato inizialmente, lo spazio che è presente tra i due elementi, è creato dal margine applicato a dropdown-menu e non viene considerato come area sensibile del div contenitore, proprio per il fatto del position:absolute appena spiegato .
Chiaramente il position:absolute serve comunque per ottenere un opportuno posizionamento di tali elementi, per cui questa regola dovrà comunque restare così com'è.
Quello che si può fare, invece, è intervenire proprio su quello spazio "non sensibile" creato dal margin.
Per risolvere si può eliminare quel margin e "sostituirlo" con un padding che invece "reagisce" all'hover.
Puoi quindi modificare il tuo CSS in questo modo:
Sostanzialmente ho azzerato il margine di dropdown-menu (che sovrascriverà la regola margin: 2px 0 0; definita invece sul file bootstrap.min.css) quindi ho applicato un padding, di 2px, al contenitore (non potendolo applicare allo stesso dropdown-menu per questioni grafiche).codice:.dropdown { padding-bottom: 2px; } .dropdown-menu { margin: 0; } .dropdown:hover .dropdown-menu { display: block; }
Non ho capito poi a che servivano le due regole che tu hai applicato a dropdown. Per cui le ho tolte. Vedi tu se serve rimetterle.
Chiaramente questa è una soluzione ma non l'unica.
PS: sulla pagina online, per il primo dropdown-menu ho notato che hai usato un div invece che un ul come per gli altri. Presumo sia un errore perché è chiaro che un div non può contenere direttamente degli elementi li.
Rispondi quotando