Ritardare l'apertura di un menu dropdown totalmente CSS

[Joe Schiaffi]

Buonasera a tutti,

gestisco un negozio online di vendita videogiochi e console, il sito gira su piattaforma Zen Cart, ho creato nell'header un menu dropdown con i loghi di tutte le console per cercare di rendere il sito più fruibile e navigabile, ho fatto tutto con i CSS, il problema è che come ci si passa sopra il mouse si apre la tendina istantaneamente, anche se quindi il mouse passa lì sopra per errore il menu si apre e questo è abbastanza fastidioso.
Volevo cercare di fare in modo che la tendina si apra dopo, tipo, un secondo o comunque un tempo prestabilito nel quale il cursore rimane sulla barra.
ho cercato con google in lungo e in largo, ho trovato dei riferimenti per le CSS Transition le ho inserite in tutte le classi di quella navbar (ho provato anche a mettere i parametri ovunque, in ogni classe anche in quelle dove era chiaramente inutile, dato che non ottenevo il risultato) ma niente, si illumina il tutto con un ritardo ed è un effetto che mi piace molto, ma purtroppo la tendina si apre sempre all'istante.
Ho letto che per queste cose si usa JavaScript, io purtroppo non sono un webmaster, ho qualche conoscenza con i CSS perchè 12 anni fa facevo questa professione a livelli molto basilari, ma non sono in grado di usare javascript e, purtroppo, essendo che il mio lavoro mi porta via tutta al giornata non ho nemmeno la possibilità di studiare, chiedo quindi come posso fare? Posso davvero riuscire a cavarmela solo con le CSS transition evitando di passare per JScript?

Il sito è questo: www.jollyrogerbay.it

Grazie mille

[KillerWorm]

Ciao, sì, direi che si può trovare una soluzione col solo css.
Puoi impostare un delay per il transition che fa comparire le tendine.

Dopo qualche prova sono arrivato a questo:

div#navigationCONSOLE li ul
{
  position: absolute;
  z-index: 1;
  left: -100%;
  right: 100%;
  padding: 0;
  margin: 0 0 0 -1px;
  border:1px solid black;
  background: white;
  transition: all 0s ease 0.25s;
}

div#navigationCONSOLE li:hover ul
{
  left: 11%;
  right: 10.5%;
}

Chiaramente è giusto un punto di partenza, poi vedi tu come meglio impostarlo.

Andrà sostituito a quelle due stesse regole che hai sul file stylesheet.css.

In sostanza le tendine vengono posizionate inizialmente fuori dall'area visibile (left: -100%; right: 100%;) e all'hover vengono riposizionate (left: 11%; right: 10.5%;) attraverso il transition che ha un delay di 0.25 secondi, sufficienti per evitare che le tendine appaiano involontariamente al semplice passaggio del puntatore.

[Joe Schiaffi]

Ti ringrazio moltissimo, ho deciso di rifare completamente quel menu usando le transition come hai indicato tu, così da poter impostare i ritardi di apertura e via dicendo.
Grazie mille, almeno riesco ad arrangiarmi con quello che già conosco ^_^