sottomenu

[nikselva]

Salve a tutti, ho scaricato questo menu in css

http://www.cssmenumaker.com/builder/...o.php?menu=057

volevo sapere se è possibile ampliarlo con un sottomenù che mi appaia a destra accanto ad ogni voce
come posso fare????
AIUTOOOOO

[Mich_]

Non e` facile modificare il comportamento dei menu.

Molto piu` semplice e` scegliere un menu diverso con sottomenu.
Tra i "link utili" ne sono citati diversi (a me piacciono quelli di CSSplay).


PS: quello e` gia` un menu a due livelli. Se ti serve uno a tre o piu` lo puoi trovare (non ce ne sono moltissimi, ma ce ne sono)

[nikselva]

il problema è che il mio cliente ha già accettato la grafica con questo tipo di menu....
non c'è proprio modo di modificarlo???

[Mich_]

In informatica non c'e` nulla di impossibile ...

Il problema e` il costo.
A mio parere ti costa meno trovare un menu a tre livelli e modificare la grafica per assomigliare a quella scelta, piuttosto che trasformare un menu a due livelli in tre.
Oppure mettere assieme alcune caratteristiche del tuo menu con altre di uno a tre livelli.

[nikselva]

il problema è mettere le caratteristiche del mio menu con quelle di un'altro...
se ti posto il css saresti in grado di modificarlo???

[Mich_]

In grado probabilmente si`, ma non ne ho il tempo.
Prova a postare, forse qualcuno ti risponde.

[nikselva]

Spero sia talmente facile da non darti troppo tempo...

.menu{ 	border:none; 	border:0px; 	margin:0px; 	padding:0px; 	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 	font-size:14px; 	font-weight:bold; 	} .menu ul{ 	background:#333333; 	height:35px; 	list-style:none; 	margin:0; 	padding:0; 	} 	.menu li{ 		float:left; 		padding:0px; 		} 	.menu li a{ 		background:#333333 url("../img/layout/seperator.gif") bottom right no-repeat; 		color:#cccccc; 		display:block; 		font-weight:normal; 		line-height:35px; 		margin:0px; 		padding:0px 15px; 		text-align:center; 		text-decoration:none; 		} 		.menu li a:hover, .menu ul li:hover a{ 			background: #006400 url("../img/layout/hover.gif") bottom center no-repeat; 			color:#FFFFFF; 			text-decoration:none; 			} 	.menu li ul{ 		background:#333333; 		display:none; 		height:auto; 		padding:0px; 		margin:0px; 		border:0px; 		position:absolute; 		width:225px; 		z-index:200; 		/*top:1em; 		/*left:0;*/ 		} 	.menu li:hover ul{ 		display:block; 		 		} 	.menu li li { 		background:url('../img/layout/sub_sep.gif') bottom left no-repeat; 		display:block; 		float:none; 		margin:0px; 		padding:0px; 		width:225px; 		} 	.menu li:hover li a{ 		background:none; 		 		} 	.menu li ul a{ 		display:block; 		height:35px; 		font-size:12px; 		font-style:normal; 		margin:0px; 		padding:0px 10px 0px 15px; 		text-align:left; 		} 		.menu li ul a:hover, .menu li ul li:hover a{ 			background:#006400 url('../img/layout/hover_sub.gif') center left no-repeat; 			border:0px; 			color:#ffffff; 			text-decoration:none; 			} 	.menu p{ 		clear:left; 		}

[Mich_]

Be` scritto cosi` non mi cimetto neppure.

Prova a scrivere in forma umana: io non sono un computer, ed ho bisogno di tutta una serie di aiuti, tipo un incolonnamento razionale, le indentazioni, ecc.
Inoltre posta anche il codice HTML: il CSS da solo dice poco.

[nikselva]

hai ragione, scusa...

.menu{ 	
border:none; 	
border:0px; 	
margin:0px; 	
padding:0px; 	
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 	
font-size:14px; 	
font-weight:bold; 	
} 

.menu ul{ 	
background:#333333; 	
height:35px; 	
list-style:none; 	
margin:0; 	
padding:0; 	
} 	

.menu li{ 		
float:left; 		
padding:0px; 		
} 	

.menu li a{ 		
background:#333333 url("../img/layout/seperator.gif") bottom right no-repeat; 		color:#cccccc; 		
display:block; 		
font-weight:normal; 		
line-height:35px; 		
margin:0px; 		
padding:0px 15px; 		
text-align:center; 		
text-decoration:none; 		
} 	
	
.menu li a:hover, .menu ul li:hover a{ 			
background: #006400 url("../img/layout/hover.gif") bottom center no-repeat; 			color:#FFFFFF; 			
text-decoration:none; 			
} 	

.menu li ul{ 		
background:#333333; 		
display:none; 		
height:auto; 		
padding:0px; 		
margin:0px; 		
border:0px; 		
position:absolute; 		
width:225px; 		
z-index:200; 		
/*top:1em; 		
/*left:0;*/ 		
} 
	
.menu li:hover ul{ 		
display:block; 		 		
} 
	
.menu li li { 		
background:url('../img/layout/sub_sep.gif') bottom left no-repeat; 		display:block; 		
float:none; 		
margin:0px; 		
padding:0px; 		
width:225px; 		
} 
	
.menu li:hover li a{ 		
background:none; 		 		
} 
	
.menu li ul a{ 		
display:block; 		
height:35px; 		
font-size:12px; 		
font-style:normal; 		
margin:0px; 		
padding:0px 10px 0px 15px; 		
text-align:left; 		
} 
		
.menu li ul a:hover, .menu li ul li:hover a{ 			
background:#006400 url('../img/layout/hover_sub.gif') center left no-repeat; 			border:0px; 			
color:#ffffff; 			
text-decoration:none; 			
} 
	
.menu p{ 		
clear:left; 		
}

e questo è il codice della barra di navigazione:

<div class="menu"> 		
<ul> 			[*]News
 			[*]--- 				
<ul> 					[*]Storia 					[*]Dirigenza 					[*]Museo 					[*]Araldica 					[*]Oratorio 					[*]Territorio 					[*]Staff Palio 					[*]Tradizioni 					[*]Foto gallery 			   [/list]		  
 		  [*]Societ&agrave; 				<ul> 					[*]Storia 					[*]Consiglio di Societ&agrave; 					[*]Calendario turni 					[*]Gruppo sportivo 					[*]Donatori sangue 					[*]Foto gallery 					[*]Contatti 			   [/list]		  
 		  [*]Vittorie 				
<ul>                   [*]2000 in poi 				  [*]1900 - 2000 				  [*]1800 - 1900 				  [*]1700 - 1800 				  [*]1685 - 1700 				  [*]Precedenti al 1685 				[/list]		  
 		  [*]Gallery 		 
 <ul> 					[*]Ricordi 					[*]Festeggiamenti 					[*]Contrada 					[*]Societ&agrave; 					[*]Gruppo sportivo  			   [/list]		  
 		  [*]Piccoli 				
<ul> 					[*]Calendario 					[*]Racconti 			   [/list]		  
 			[*]Pubblicazioni                 
<ul>                 [*]Selvalta                 [*]Numeri unici                 [*]Altre pubblicazioni                 [*]DVD - Poster                 [/list]
 			[*]Protettorato 			[*]Info utili 		[/list]
</div>

spero tu possa darmi una mano

[Mich_]

Ci sono gravi erorri nel file HTML e ci sono incongruenze nel CSS: prima di poter procedere alle modifiche e` necessario correggere.

In un file HTML NON ci possono essere oggetti con lo stesso id.
Quindi gli id="current" o devono diventare delle classi, oppure ne devi definire uno solo (come credo fosse nelle intenzioni di chi ha inventato il menu).

Poi devi chiarire se vuoi che il menu funzioni anche nei browser IE: in tal caso la pseudoclasse :hover si puo` applicare solo ai tag <a>.

Infine non sei congruente per quanto riguarda i selettori, e questo crea confusione (piu` nello sviluppatore che nel brwoser), ma e` fonte di errori facili: ad esempio i sottomenu a volte li identifichi con
.menu li a
altre vote con
.menu ul li a{
Nella pratica i due selettori indicano gli stessi oggetti, ma sembrano diversi.
E questo e` ripetuto varie volte: in questi casi la complicazione e` fonte di errori

Ribadisco: e` piu` facile adattare la grafica ad unmenu funzionante, che far funzionare un menu con quei difetti.
Vedi ad esempio: http://www.cssplay.co.uk/menus/ul-multi.html
oppure: http://www.cssplay.co.uk/menus/ul-multi-two.html
o altri che trovi nella pagina http://www.cssplay.co.uk/menus/index.html
(i link sopra sono nella sezione Float/Drop menu system, ma dai uno sguardo anche nelle altre sezioni "multilevel")