graphic fly-out menu...problemi di sovrapposizione tra div

[mosquito70]

Ciao a tutti,
come da titolo, sto implementando questo script, recuperato da cssplay,

http://www.cssplay.co.uk/menus/flyout_wall.html

nella nuova versione di un piccolo portale web.

Questa è la pagina di prova.
http://vers02.comevien.com/
e questo il codice css link

Aprendo la pagina, si notano due problemi.

1. Al passaggio del mouse sopra le voci di menù, solo nel primo caso l'immagine che va a sovrapporsi risulta posizionata correttamente, mentre le altre, anche se tutte della stessa dimensione, risultano sfalzate

2. Passando sul menu ricette, viene aperta una tendina con la lista delle ricette, ma a differenza del caso presente al link index_2.php non ho la possibilità di muovermi nel submenù, in quanto questo "scompare"
Immagino perchè in index.php, la parte destra del portale è definita dal div "riquadroprinci".

Sia per il punto 1, ma soprattutto per il punto 2, non riesco ad uscirne.
Ho ipotizzato di aprire il submenu sopra gli altri menu di sinistra (evitando quindi di sovrapporsi al testo centrale), ma dà lo stesso problema.

Come posso risolvere?

Chiaramente qualsiasi suggerimento è ben accetto, visto che ho libertà di scegliere dove posizionare i submenu, anche se preferirei che si aprano comunque sulla destra (per non dover ridisegnare buona parte della grafica

Grazie in anticipo.
Ciao ciao

[fcaldera]

ho guardato velocemente
per il punto 1)
se provi a mettere un bordo attorno agli[*] noterai che, prima voce esclusa, la grafica non è allineata in maniera uniforme e per questo motivo quando l'immagine sparisce all hover il background è disallineato rispetto ad essa

secondo me ti coneveniva gestire entrambi gli stati del pulsante con uno sprite bidimensionale per le voci di primo livello e un altro per quelle di secondo livello gestendo oltretutto la cosa sui link e non sugli[*]
(se ti interessa IE6 come compatibilità)

per il punto 2, sempre mettendo un bordo attorno gli[*] noterai che il sottomenu non è adiacente (o sormontatnte) al[*] di primo livello e quando il mouse finisce in questo buco perdi lo stato hover

Ciao

[mosquito70]

Originariamente inviato da fcaldera
ho guardato velocemente
per il punto 1)
se provi a mettere un bordo attorno agli[*] noterai che, prima voce esclusa, la grafica non è allineata in maniera uniforme e per questo motivo quando l'immagine sparisce all hover il background è disallineato rispetto ad essa

secondo me ti coneveniva gestire entrambi gli stati del pulsante con uno sprite bidimensionale per le voci di primo livello e un altro per quelle di secondo livello gestendo oltretutto la cosa sui link e non sugli[*]
(se ti interessa IE6 come compatibilità)

per il punto 2, sempre mettendo un bordo attorno gli[*] noterai che il sottomenu non è adiacente (o sormontatnte) al[*] di primo livello e quando il mouse finisce in questo buco perdi lo stato hover

Ciao

Sempre preciso.
Grazie mille per i consigli. Appena riesco a fare le modifiche vi faccio sapere.

[mosquito70]

ciao a tutti,
ho risolto solo il primo dei problemi che avevo indicato nel primo post. Grazie hai suggerimenti di Fcaldera, questo è il risultato utilizzando la tecnica "sprite Css" in verticale.

(chiaramente l'immagine è una prova fatta da me, per evitare lavoro inutile al grafico. Poi verrà migliorata, con il suo intervento)

http://vers02.comevien.com/

Per il problema numero 2, sono in alto mare, nel senso che non riesco ad applicare la stessa tecnica utilizzata in precedenza e riconducibile a questo sito http://www.cssplay.co.uk/menus/flyout_wall.html

L'immagine la trovate al link "http://vers02.comevien.com/map/ricettesub.gif" e si dovrebbe aprire all'hover sul link "ricette". Avrei bisogno solo del codice per l'hover, mentre poi la sistemo graficamente io.

Sono stato buona parte della domenica a cercare di capire perchè non funziona (viene sfalzata l'immagine dei link) e forse a causa della stanchezza e della poca esperienza, non sono arrivato al risultato che vorrei.

Avete qualche suggerimento da darmi?

Grazie in anticipo
Ciao

(chiaramente se trovo la soluzione, ve lo comunico)