Problema con menu verticale

[Roby140569]

Sto penando con un menu a tendina verticale con sottomenu...

Il codice XHTML è questo:

<ul id="buttons">
        <li id="punto1">Punto 1
        <li id="punto2">Punto 2
        <li id="punto3">Punto 3
         <ul id="buttons">
            	<li id="punto31">Punto 3.1
                <li id="punto32">Punto 3.2[/list]
        
        <li id="punto4">Punto 4
        	<ul id="buttons">
            	<li id="punto41">Punto 4.1
                <li id="punto42">Punto 4.2[/list]
        
        <li id="punto5">Punto 5
	[/list]

Il CSS è questo:

#buttons {
	width: 424px;
	margin: 0;
	padding: 0;
	list-style: none;
	}

#buttons li {
	margin: 0; padding: 0;
	display: inline;
	list-style-type: none;
}

#buttons a {
	float: left;
	padding: 0 0 0 300px;
	overflow: hidden;
	width: 0px; 
}

#buttons a:hover { background-position: 0 -31px; }
#buttons a:active, #buttons a:selected { background-position: 0 -31px; }
#punto1 a { height: 31px; background: url(i/buttons/punto1.jpg) top left no-repeat; }
#punto2 a { height: 31px; background: url(i/buttons/punto2.jpg) top left no-repeat; }
#punto3 a { height: 31px; background: url(i/buttons/punto3.jpg) top left no-repeat; }
#punto31 a { height: 31px; background: url(i/buttons/punto31.jpg) top left no-repeat; }
#punto32 a { height: 31px; background: url(i/buttons/punto32.jpg) top left no-repeat; }
#punto4 a { height: 31px; background: url(i/buttons/punto4.jpg) top left no-repeat; }
#punto41 a { height: 31px; background: url(i/buttons/punto41.jpg) top left no-repeat; }
#punto42 a { height: 31px; background: url(i/buttons/punto42.jpg) top left no-repeat; }
#punto5 a { height: 31px; background: url(i/buttons/punto5.jpg) top left no-repeat; }

#buttons li ul{
display: none;
}


#buttons li:hover ul{
display:block;
position:relative;
z-index:1000;
width:400px;
padding: 0;
margin: 0 0 0 233px;
}

Il problema è che quando punto col mouse su una voce del menu che ha delle voci di livello più basso, appare il sotto-menu, ma fa scorrere in basso le voci sottostanti.

Ci sono stato su molto tempo, ma no sono riuscito ancora a trovare una soluzione. Qualche idea???


Grazie!

[Roby140569]

Allego un'immagine per far capire meglio il mio problema.

[Roby140569]

Grazie per la risposta.

Per adesso ho il sito in locale, non riesci già così a farti un'idea di quale potrebbe essere il problema?


Premetto che mi sono avvicinato da poco ai CSS e non escludo la possibilità di aver scritto delle gran cavolate nel codice.

Ho cercato in giro per la rete, ma non sono riuscito a trovare niente che facesse al caso mio. Ho trovato dei menu verticali (con sottomenu), ma senza immagini. Con i menu senza immagini funzionava tutto bene.

[Roby140569]

Qualche aiuto??? :master:

[Mich_]

Non e` facile rispondere: la tua pagina ha un problema che si presenta con i movimenti prodotti dagli stati :hover del CSS, e non si puo` vedere la pagina.

Comunque ci sono errori HTML nella pagina, per cui ti consiglio di passare dal valildatore.
Quello che ho visto e` l'uso di due id uguali: questo e` vietato dalle specifiche, e comunque il CSS non puo` sapere a quale dei blocchi si riferisce lo stile (e tra l'altro i due blocchi devono avere comportamenti diversi)

Poi vedo anche un errore CSS: hai dato "display: inline;" ai[*], che invece dovrebbero rimanere di tipo blocco (altrimenti non puoi definirne le dimensioni); inoltre un oggetto di tipo inline non puo` contenere oggetti di tipo blocco (il tuo <a> lo hai fatto diventare blocco, giustamente).

[Roby140569]

Grazie per la risposta.

Originariamente inviato da Mich_
Non e` facile rispondere: la tua pagina ha un problema che si presenta con i movimenti prodotti dagli stati :hover del CSS, e non si puo` vedere la pagina.

Per questo ti ho risposto in privato.

Originariamente inviato da Mich_
Comunque ci sono errori HTML nella pagina, per cui ti consiglio di passare dal valildatore.
Quello che ho visto e` l'uso di due id uguali: questo e` vietato dalle specifiche, e comunque il CSS non puo` sapere a quale dei blocchi si riferisce lo stile (e tra l'altro i due blocchi devono avere comportamenti diversi)

Ho coreetto il codice HTML, adesso non ci sono più id uguali. Nello specifico, adesso ho buttons, buttons1 e buttons2. Così dovrei anche mettermi nelle condizioni di poter controllare i comportamenti dei tre id in maniera indipendente, giusto?

Originariamente inviato da Mich_
Poi vedo anche un errore CSS: hai dato "display: inline;" ai[*], che invece dovrebbero rimanere di tipo blocco (altrimenti non puoi definirne le dimensioni); inoltre un oggetto di tipo inline non puo` contenere oggetti di tipo blocco (il tuo <a> lo hai fatto diventare blocco, giustamente).

Ho tolto display:inline... ma adesso mi si è "scombinato" il menu...