aiuto sottomenu

**Saveh** · 11-02-2011, 04:07

Salve, sono un paio di giorni che sto litigando con un sottomenu che non riesco a creare (vorrei che sia visibile solo al passaggio del mouse sull'elemento 'padre'), incollo di seguito il codice html prima, e css dopo:

http://codepaste.net/w9rnvj
-----------------------------------------------------------------------------------------------
http://codepaste.net/ubpwbv
-----------------------------------------------------------------------------------------------
Il problema e' che quando passo col mouse sopra la sezione Frutta dovrebbe apparire il sottomenu con la lista (banane, mele, pere) ma non funziona.. sto usando visibility: piuttosto che position:absolute top: perche' appunto e' un test, la cosa che mi preme e' che funzioni il sottomenu [

]
Stavo guardando e riguardando i menu sul libro css - guida completa ma non riesco a trovare una soluzione. Qualche aiuto ?

**JVM** · 11-02-2011, 17:43

ho messo giù due righe di codice al volo, non so quanto possa andar bene ma prova con questo

file html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<ul class="test">
 
	[*]
	 PRIMA SEZIONE, Frutta
	 
		<ul id ="prima" onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">
			[*]
				 PRIMA SOTTO SEZIONE, Banana
		  
			[*]
				 SECONDA SOTTO SEZIONE, Mele
		  
			[*]
				 TERZA SOTTO SEZIONE, Pere
		  
		[/list]
	
			[*]
			 SECONDA SEZIONE, Verdura
  
			[*]
			 TERZA SEZIONE, Cereali
  [/list]

</body>
</html>

file css

codice:

.test li {
    list-style:none;
	width:300px;
}
 
.test li ul {
display:none;
}
 
.test a {
 text-decoration: none;
 display:block;
}

la proprietà width di ".test li" l'ho messa altrimenti il tag avrebbe preso tutta la lunghezza della pagina, con conseguenti fastidi nella visualizzazione del menu, se vuoi toglilo.

in ogni caso io personalmente avrei utilizzato le proprità css su dei div piuttosto che sui tag[*], ma è una mia opinione. Intanto che aspetti risposte dai più esperti puoi provare con i due file che ti ho postato

**Saveh** · 11-02-2011, 20:03

ahh grandioso funziona alla perfezione, si risolve tutto con due righe di javascript (che ho appena iniziato a studiare), pero` il mio era piu` che altro un test per capire come modificare un sotto-elemento da un altro elemento (ad esempio con la pseudoclasse :hover su un elemento padre penso sia possibile modificare il sotto elemento figlio).. non mi e` tanto chiara la "gerarchia" in questo caso per modificare altri elementi.. mi rendo conto che mi spiego male, ma e` difficile spiegare questo concetto

**JVM** · 11-02-2011, 23:40

da quello che ho capito con questo codice

codice:

.test li a:hover  li ul li  {
visibility:visible;
}

volevi rendere visibile il contenuto del tag annidato[*] al passaggio del cursore (a:hover) sul tag <a>, ma per quanto ne so con css non è possibile definire l'aspetto di un tag , in questo caso[*], tramite un ALTRO tag <a:hover> .

Puoi definire separatamente i tag , ma non stabilire interazioni tra i due, del tipo quando il mouse passa qui sopra rendi visibile un altro tag, per quello c'è javascript, se mi sono perso qualcosa invito gli altri correggermi

.
In particolare ti potrebbe tornare utile l'utilizzo di un framework, che tra l'altro avrà effetti visivi più piacevoli da vedere, puoi dare uno sguardo a JQuery per esempio, con il suo JQuery UI.

**Saveh** · 11-02-2011, 23:49

eh si` era proprio quello che intendevo.. modificare un elemento 'operando' su un altro.. avevo visto un menu con sottomenu fatto solo in css se non sbaglio, sicuramente javascript e` la soluzione migliore. grazie tante

Discussione: aiuto sottomenu

Strumenti discussione

Ricerca discussione

Visualizza

aiuto sottomenu

Permessi di invio