un display: block su dei button dropdown che un pò funziona e un pò non funziona...

[theseo]

ciao a tutti, ho una pagina con tanti bottoni dropdown che vorrei si aprissero appena il mouse ci va sopra, allora ho messo nel css-->

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown:hover .dropdown-menu {
    display: block;
 }

beh funziona ma certe volte il menù che scende si riesce a cliccare altre volte no, così... random...
ma com'è possibile? dove sbaglio?

qui il codice dei button

  <div class="btn-group" ><div class="dropdown">
  <button type="button" class="btn btn-success dropdown-toggle" >
    RICAMBI <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="ardea/carrozzeria.php">carrozzeria</a></li>
    <li><a href="ardea/elettrico.php">impianto elettrico</a></li>
  </ul></div>
  </div>

qui la pagina
http://www.oldlanciaspares.com/indexpp.php

[KillerWorm]

Ciao

beh funziona ma certe volte il menù che scende si riesce a cliccare altre volte no

Io non riesco a notare il problema sul click ma piuttosto lo noto sull'hover. Cioè, quando il dropdown compare, e si cerca di portare il mouse su questo, a volte sparisce (a prescindere dal fatto che si clicchi o no).
Ti riferisci per caso a questo problema?
Eventualmente ti spiego perché succede e ti indico come poter risolvere.



[Mod]
Quando si posta del codice sul forum è opportuno utilizzare gli appositi tag di formattazione [code] (vedi regolamento di sezione). Grazie.

[theseo]

sì scusa hai ragione, mi sono spiegato male, è il dropdown che ogni tanto sparisce...
grazie in anticipo per i tuoi chiarimenti

[KillerWorm]

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:

.dropdown {
    padding-bottom: 2px;
}
.dropdown-menu {
    margin: 0;
}
.dropdown:hover .dropdown-menu {
    display: block;
}

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).

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.

[theseo]

beh che dire.... una spiegazione fantastica (non ci sarei MAI arrivato), interessantissima tra l'altro... dovrebbe diventare un tutorial a tutti gli effetti!!
grazie infinite e tanti tanti complimenti x la competenza!
ah ovviamente funziona alla grande ed ovviamente hai ragione anche x quell'errore scritto nel PS...

[KillerWorm]

Non c'è di che, mi fa piacere che funzioni
Buon proseguimento.