sotto menu

[webmasterone]

ciao a tutti
premetto che sto cominciando a capire come funzionano i css
ho scaricato un esempio, e lo to modificando per capire come funziona

il foglio di stile che gestisce il menù è:

body {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	font-weight: bold;
	}	

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

#menu {
	width: 150px;
	//border-style: solid solid none solid;
	border-style: solid solid solid solid;
	border-color: #D76100;
	border-size: 1px;
	border-width: 1px;
	margin: 3px;
	}
	
#menu li a {
  	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 26px;
	text-decoration: none;
	}
	
#menu li a:link, #menu li a:visited {
	color: #9E3C02;
	display: block;
	background: url("menu.gif");
	padding: 8px 0 0 30px;
	}
	
#menu li a:hover {
	color: #fff;
	background: url("menu.gif") 0 -32px;
	padding: 8px 0 0 30px;
	}
	
#menu li a:active {
	color: #fff;
	background: url("menu.gif") 0 -64px;
	padding: 8px 0 0 30px;
	}

ho una gif che contiene lo sfondo del pulsante (praticamente 3 pulsanti sovrapposti in un unica immagine)

menu.gif (lo allego al 3d)

Infine il codice nella pagina

<div id="menu">
  <ul>[*]Login[*]---[*]LogOff()[/list]
</div>

quello che non riesco a fare, sono dei sottomenù.

in sostanza sto cercando di trasformare
<ul>[*]menu1[*]menu2[*]menu3[/list]

in

<ul>[*]menu1
<ul>
[*]sotto-menu2
[*]sotto-menu3
[/list][*]menu2[*]menu3[/list]

vogliate scusarmi per la domanda che sembrerà banale, ma , come detto, sono all' inizio.

sarei felice anche se mi forniste degli esempi da studiare meglio per realizzare quello che mi serve.


Grazie

Web

[webmasterone]

Bene,
ho scoperto come agire sui "sottomenu"

#menu li ul {
	width: 126px;
	//border-style: solid solid solid solid;
	border-style: solid solid none none ;
	border-color: #D76100;
	border-size: 1px;
	border-width: 1px;
	margin: 3px;
	margin-left: 20px;
	}
	
#menu li ul a {
  	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 26px;
	text-decoration: none;
	}
	
#menu li ul a:link, #menu li a:visited {
	color: #9E3C02;
	display: block;
	background: url("sub_menu.gif");
	padding: 8px 0 0 18px;
	}
	
#menu li ul a:hover {
	color: #fff;
	background: url("sub_menu.gif") 0 -32px;
	padding: 8px 0 0 18px;
	}
	
#menu li ul a:active {
	color: #fff;
	background: url("sub_menu.gif") 0 -64px;
	padding: 8px 0 0 18px;
	}
	
#menu li ul li ul {
	font-size: 75%;
	width: 105px;
	//border-style: solid solid solid solid;
	border-style: solid solid none none ;
	border-color: #D76100;
	border-size: 1px;
	border-width: 1px;
	margin: 3px;
	margin-left: 20px;
	}
	
#menu li ul li ul a {
  	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 26px;
	text-decoration: none;
	}
	
#menu li ul li ul a:link, #menu li a:visited {
	color: #9E3C02;
	display: block;
	background: url("sub_menu.gif");
	padding: 3px 0 0 18px;
	}
	
#menu li ul li ul a:hover {
	color: #fff;
	background: url("sub_menu.gif") 0 -32px;
	padding: 3px 0 0 18px;
	}
	
#menu li ul li ul a:active {
	color: #fff;
	background: url("sub_menu.gif") 0 -64px;
	padding: 3px 0 0 18px;
	}

ho cambiato l'immagine per i "sottomenu" usandone una con il puntino più piccolo

ora quello che non so come fare, e comprimere/espandere i menu'

qualcuno mi da un suggerimento ?

in sostanza quello che vorrei è che da una struttura del tipo:

<div id="menu">
  <ul>[*]Menu a[*]Menu b[*]Menu c[*]Menu d        
	  <ul>
	[*]Sottomenu d 1 
		  <ul>
		[*]Sottomenu d 1 a 
		[*]Sottomenu d 1 b 
		[*]Sottomenu d 1 c 
		[*]Sottomenu d 1 d 		    		    
		[/list]	          
	[*]Sottomenu d 2 
	[*]Sottomenu d 3 
	[*]Sottomenu d 4 
	[/list]	[*]Menu e     [*]Menu f         [/list]
</div>

all'apertura della pagina si vedessero solo i "Menu a b c d e f"
cliccando su "Menu d" si aprano "Sottomenu d 1/2/3/4"
e cliccando su "Sottomenu d 1" si aprano "Sottomenu d 1 a/b/c/d"

grazie a chi mi da un suggerimento

web

[cassano]

Qualcuno mi spiega questa gerarchia di selezione ?

menu li ul li ul a

[webmasterone]

sto cercando di capire come funzionano gli elenchi con i css, quindi ho preso un esempio, e lo sto modificando per cercare di vedere cosa succede

dato che avevo

#menu li a

per il livello sotto ho aggiunto

#menu li ul a

e per quello ancora sotto

#menu li ul li ul a


a è il tag del link (a href)

come ho detto, sto cercando di imparare.
se sto sbagliando qualcosa mi piacerebbe che qualcuno mi dicesse cosa, e che mi dicesse come devo correggere

se no, come faccio ad imparare ?

[Mich_]

Non e` facile mettere mano ai menu, specie per chi e` alle prime armi.
In linea di massima e` meglio copiare un menu a piu` livelli e modificare quello; anche ai fini didattici consiglio di guardare due menu simili, uno ad un livello ed uno a due e cercare le differenze.

Ci sono in rete ottime raccolte di menu; alcune sono citate tra i "link utili" del forum (a me piace come sono organizzati i menu di CSSplay)

[webmasterone]

grazie per la risposta
è più o meno quello che sto facendo, ma oltre a copiare e modificare mi sarebbe piaciuto anche capire come funzionano
e ti assicuro che tra ul li ul li ul li non ci sto a capire più niente

[Mich_]

Be`, a volte qualcuno esagera ... In quei casi sarebbe meglio (per semplificare la vita a noi poveri mortali) metterci una classe da qualche parte.

Comunque nei selettori lo spazio e` il selettore di discendenza,
il segno maggiore ( > ) e` il selettore di discendenza diretta (non supportato dalle vecchie versioni di IE)
... e per gli altri selettori vedi il manuale dei CSS