Come aggiungere dei submenu a scomparsa (on hover) via css

Ciao @sacconi ,

Mi dispiace che nessuno sia riuscito a rispondere prima alla tua domanda, non so se hai ancora bisogno di un piccolo aiuto con il tuo CSS, nel caso questo penso potrebbe aiutarti:

Per fare in modo che i submenu compaiano “on hover” allineati sotto la voce di menu da cui dipendono, puoi utilizzare la proprietà CSS “position” e “display”. In particolare, puoi impostare la posizione dei submenu come “absolute” rispetto alla voce di menu padre, utilizzando la proprietà “position: absolute” e indicando la posizione con “top” e “left”. Inoltre, devi impostare la proprietà “display” dei submenu su “none” inizialmente, e poi farli apparire quando si passa il mouse sulla voce di menu padre utilizzando il selettore CSS “li:hover ul” e impostando “display: block”.

Ecco un esempio di codice CSS che puoi utilizzare:

#header-right-section ul { 
margin: 20px 0px 20px 0px;
list-style-type: none;
list-style: none; 
list-style-image: none; 
text-align: right; 
display: inline-block; 
}

#header-right-section li { 
padding: 0px 20px 0px 0px; 
display: inline-block; 
position: relative; /* posizione relativa per consentire posizione assoluta per submenu */ 
}

#header-right-section a { 
color: #006288; 
}

#header-right-section a:hover { 
text-decoration: underline; 
}

/* submenu / 
#header-right-section ul ul { 
position: absolute; 
top: 100%; / posizionamento sotto la voce di menu padre/ display: none; / inizialmente nascosto */ 
}

#header-right-section li:hover ul { 
display: block; /* mostra il submenu al passaggio del mouse sulla voce di menu padre */ 
}

Assicurati di adattare il selettore CSS alle classi o ID specifici utilizzati nel tuo HTML.

Spero di esserti stato utile,

Buona Giornata…

Enzo 😉

Ciao @sacconi ,

prova con questo css:

#header-right-section ul {
  margin: 20px 0px 20px 0px;
  list-style-type: none;
  list-style: none;
  list-style-image: none;
  text-align: right;
  display: inline-block;
}

#header-right-section li {
  padding: 0px 20px 0px 0px;
  display: inline-block;
  position: relative;
}

#header-right-section a {
  color: #006288;
}

#header-right-section a:hover {
  text-decoration: underline;
}

/* submenu */
#header-right-section ul ul {
  position: absolute;
  top: 100%;
  display: none;
}

#header-right-section li:hover ul {
  display: block;
}

/* Aggiunta del selettore :hover sul menu padre e sul menu figlio */
#header-right-section li:hover > ul,
#header-right-section ul:hover {
  display: block;
}

#header-right-section ul li {
  position: relative;
}

#header-right-section ul ul ul {
  position: absolute;
  left: 100%;
  top:0;
}

#header-right-section ul li a {
  width: 200px;
  display: inline-block;
  text-align: left;
}

#header-right-section ul ul li a {
  width: 150px;
  display: inline-block;
  text-align: left;
}

Nel codice sopra, ho aggiunto il selettore :hover sulla voce di menu padre e sul submenu figlio, utilizzando i selettori > e :hover.

Inoltre, ho anche aggiunto alcuni stili per impostare la larghezza delle voci di menu. Ovviamente ti consiglio di adattare il codice alla tua struttura HTML specifica.

Spero di esserti stato utile

Enzo

ciao @sacconi ,

Il tema che utilizzi dovrebbe però darti la possibilità di modificare il menù a tuo piacere ( vai in aspetto, personalizza e li gestisci l’aspetto e le voci).

Prova a reimpostare il menù da dove ti ho indicato e cancellando il css supplementare che hai aggiunto in precedenza.

Fammi sapere se cosi risolvi

Enzo

Capisco, allora questo CSS (che vedi sotto) non era male?

Ma avevi il problema che non riuscivi a fissare il submenù … giusto?

#header-right-section ul { 
margin: 20px 0px 20px 0px;
list-style-type: none;
list-style: none; 
list-style-image: none; 
text-align: right; 
display: inline-block; 
}

#header-right-section li { 
padding: 0px 20px 0px 0px; 
display: inline-block; 
position: relative; /* posizione relativa per consentire posizione assoluta per submenu */ 
}

#header-right-section a { 
color: #006288; 
}

#header-right-section a:hover { 
text-decoration: underline; 
}

/* submenu / 
#header-right-section ul ul { 
position: absolute; 
top: 100%; / posizionamento sotto la voce di menu padre/ display: none; / inizialmente nascosto */ 
}

#header-right-section li:hover ul { 
display: block; /* mostra il submenu al passaggio del mouse sulla voce di menu padre */ 
}

/* submenu */
        #header-right-section ul ul {
            position: absolute;
            top: 100%;
            display: none;
            transition: all 0.3s ease-in-out;
            transition-delay: 3s;
        }

Prova a sostituire la parte di codice che riguarda #header-right-selectionul ul con il codice che ti ho fornito qui sopra, ho inserito un transition-delay di 3secondi, se funziona e ritieni che sia troppo diminuisci il valore numerico

fammi sapere 😉

Enzo