Menù inline dropdown: posizionare le tendine...

[Nix_Crowd]

Salve ragazzi

ho un menù inline e dropdown, con float:right, con 5 ul di varia larghezza (data dal testo dei vari li ), questi ul al passaggio del mouse generano un altro ul (la tendina) con li diversi per ogniuno di essi.

Tutte le tendine devono avere la stessa larghezza, data dall'ul più "grande" (170px per l'esattezza), ora il problema sta nel fatto che le tendine si generano dalla "parte" sinistra del primo ul (ovvio) e siccome il menù ha il float a destra le ultime due voci generano una tendina che esce fuori dal container e quindi dall'intero layout del sito (i margini laterali del container sono settati su auto in modo da posizionare tutto il sito al centro del browser).

Vi posto il codice che sto usando, molto "zozzo" ma funzionante, e vorrei trovare qualcuno che mi spiega come generare le tendine da destra invece che da sinistra.

Ecco il CSS:

/* menù principale */
				
		div#menu1 ul{width:960px;
				  height:30px;
				  background-color:trasparent;}
		
		div#menu1 ul li ul li{list-style-type:none;
							margin: 0;
							padding:7px 10px 7px 0;
							text-align:right;}

		div#menu1 li{display:inline;
				float:right;
				margin: 0;
				padding: 0.1em 0.8em;
				font-size:1.2em;
				font-family:Arial, Helvetica, sans-serif;}

			div#menu1 ul a:link {color:#cccccc;
							text-decoration:none;}

			div#menu1 ul a:visited{display: block;
								color: #cccccc;
								text-decoration: none;}

			div#menu1 ul a:hover{color:#666666;}
			
			div#menu1 ul a:active{color: #cc0000;
								text-decoration: none;}

			div#menu1 li ul{display: none;}

			div#menu1 li:hover ul{display: block;
								position: absolute;
								z-index:1;
								width: 170px;
								height:auto;
								padding: 0 0 0 0;
								margin: 0 0 0 0;
								background-color:#000000;
								font-size:0.75em;}
										

			div#menu1 li li {border-bottom:1px solid #000000;
						width: 170px;} 
					
			div#menu1 li li:hover {background-color:#333333;} 
				
			div#menu1 li li a:hover{color:#cccccc;
					        	text-decoration:none;}

... e l'html:

<div id="menu1">
		<ul>
			[*]AAAAA
				<ul>
					[*]bbbbb bbbbbbb
					[*]bbbbb bbbbbbb
					[*]bbbbb bbbbbbb
				[/list]
			 
			[*]AAAAAAAA
				<ul>
					[*]bbbbbbb
					[*]bbbbbb
				[/list]
			[*]AAAAA AAAAAAAAAAA
				<ul>
					[*]bbbbbbb
					[*]bbbbb
					[*]bbbbbbb
					[*]bbbbbbbbb
				[/list]
			
			[*]AAAAA AAAAAAAAAAA	
			[*]AAAAA AAAAAAAAAAA
				<ul> 
					[*]bbbbbbb
					[*]bbbbbbb
					[*]bbbbb
					[*]bbbbb bbbbbbbbb
				[/list]
						[/list]
    </div>

...ovviamente se trovate errori o codice sporco vi prego di comunicarmelo così da correggerlo!!
Grazie in anticipo!!

[Nix_Crowd]

up!

[Nix_Crowd]

... dai ragazzi, non ci credo che nessuno di voi ha la risposta a questo quesito !!

... neanche con JS è risolvibile ?! :|

[Nix_Crowd]

...ho spulciato tutto CSSPlay e non trovo niente ... qualcuno potrebbe spiegarmi come fare con i position ?! ... o in altro modo ?!


... so che sto diventando pressante ma non so proprio come risolvere!!

[Prill]

Ciao Nix_Crowd, copiando e incollando il tuo codice si ottiene un risultato un po' strano, rivedere il menu richiederebbe tempo che forse non c'è, ci sono on line molti menu già pronti, oltre a cssplay, dove peraltro mi sembra strano tu non abbia trovato niente, hai guardato anche gli altri link utili?

[Nix_Crowd]

Ciao Prill e grazie della celere risposta, scusami se ti ho disturbato!

Comunque solo ora ho provato ad incollare il menù in una pagina singola e noto che il risultato, come dici tu, è alquanto strano, però inserito nel div di appartenenza della pagina funziona bene (o comunque funziona meglio di come sembra in una pagina "vuota").

Per ora sto spulciando CSSPlay alla ricerca di qualcosa che mi aiuti a risolvere il mio problema ma ancora niente (e sembra strano anche a me).

Gli altri link utili ancora li controllo seriamente, gli ho dato uno sguardo sommario, ma ora come ora mi dovrò mettere d'impegno per risolvere.

Comunque quel menù l'ho creato modificando alcuni esempi trovati in rete(maggiormente su LAU).

Vorrei un consiglio da un esperto: il menù conviene impostarlo con i float o con i position ?!

Grazie mille!