Problema Menu a tendina

[SERIALit]

Salve raga,
ho bisogno del vostro aiuto perché ormai sono davvero alla fine delle forze.
Ho trovato in rete un sistema per creare un menu a tendina utilizzando semplicemente il css.

Sebra funzionare, o almeno credo, anche perché l'ho testato solo su IE6, ma una cosa proprio non sto riuscendo a farla.

Ho deciso di mettere il menu all'interno di una pagina visualizzata nelle altre pagine del sito per mezzo di un IFRAME. Questo in modo da poter aggiornare il menu senza poi dover aggiornare tutte le pagine (in questo modo basterà intervenire solo sull'iframe).
Il problema è che, trovandosi in un iframe, nella pagina dove l'iframe è contenuto non si vede la tendina, resta nascosta. Non se sono riuscito a rendere l'idea.

Ora vi posto il codice.

Questo è il foglio .css:

body {
	background: #7A7A7A;
	margin-top: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 11px;
	font-family: Tahoma;
}

tr {
	font-size: 11px;
        font-family: Tahoma;
}

td {
	font-size: 11px;
        font-family: Tahoma;
}

p {
	margin-bottom: 0px;
	margin-top: 0px;
}

 /* common styling */
.menu2 {
float:left; width:100%; font-family: Tahoma; font-size:11px; border-top:1px solid #999999;
background:#ddd url(images/layout/menu1.gif) repeat-x; 
margin:0 0 20px 0; /* for this demo only */ 
}
.menu2 ul {
padding:0;margin:0;list-style-type:none;
}
.menu2 ul li {
float:left; position:relative;
}
.menu2 ul li.group {display:block; text-indent:10px; background:#000000; color:#666666; width:152px; padding:0px 0;}

.menu2 ul li a, .menu2 ul li a:visited {
float:left; display:block; text-decoration:none; color:#666666; padding:0px 15px; line-height:27px; height:27px;
}

.menu2 ul li:hover {width:auto;}

.menu2 ul li a:hover {background:#000000 url(images/layout/menu2.gif); color:#FFFFFF;}

.menu2 ul li:hover a {background:#000000 url(images/layout/menu2.gif); color:#FFFFFF;}

.menu2 ul li ul {
display: none;
}
.menu2 table {
margin:-1px; border-collapse:collapse; font-size:11px;
}

/* specific to non IE browsers */
.menu2 ul li:hover ul {
display:block; position:absolute;top:29px; background:#000000; margin-top:1px; left:0; width:152px;
}

.menu2 ul li:hover ul.scroller {
height:138px; width:172px; overflow:auto;}

.menu2 ul li:hover ul.endstop {
left:-90px;
}
.menu2 ul li:hover ul li ul {
display: none;
}
.menu2 ul li:hover ul li a {
display:block; background:#000000; color:#666666;height:auto;line-height:15px;padding:0px 16px; width:146px;
}
.menu2 ul li:hover ul li a.drop {
background:#000000;
}
.menu2 ul li:hover ul li a:hover {
color:#FFFFFF; background: #000000;
}
.menu2 ul li:hover ul li a:hover.drop {
background: #000000; color:#FFFFFF;
}
.menu2 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-70px; color:#FFFFFF; left:152px; height:138px; width:172px; overflow:auto; background:#000000;
}
.menu2 ul li:hover ul li:hover ul li a {background:#888888;}
.menu2 ul li:hover ul li:hover ul li.group {width:152px; padding:2px 0;}


.menu2 ul li:hover ul li:hover ul.left {
left:-172px;
}
.menu2 ul li:hover ul li:hover ul li a:hover {background:#000000; color:#FFFFFF;}



/* specific to IE5.5 and IE6 browsers */
.menu2 ul li a:hover ul {
display:block;position:absolute;top:30px; t\op:26px; background:#000000;left:0; marg\in-top:1px;
}
.menu2 ul li a:hover ul.scroller {
height:138px; overflow:auto;}

.menu2 ul li a:hover ul.endstop {
left: -90px;
}
.menu2 ul li a:hover ul li a {
display:block; color:#666666; height:2px; line-height:15px; padding:0px 16px; width:146px; w\idth:146px;
}
.menu2 ul li a:hover ul li a.drop {
background:#888888; padding-bottom:2px;
}
.menu2 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu2 ul li a:hover ul li a:hover {
color:#FFFFFF; background: #000000;
}
.menu2 ul li a:hover ul li a:hover.drop {
 background: #000000; color:#FFFFFF;
}
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:-69px; t\op:-70px; color:#FFFFFF; left:152px; height:138px; width:170px; overflow:auto; background:#000000;
}
.menu2 ul li a:hover ul li a:hover ul.left {
left:-170px;
}
.menu2 ul li a:hover ul li a:hover ul li a:hover {background:#000000; color:#FFFFFF;}


.left {clear:both;}

Mentre questo è il codice che richiama il menu nella pagina:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="imagetoolbar" content="no">
<link href="menu.css" rel="stylesheet" type="text/css">

</head>
<body>
<div class="menu2">

<ul>[*]MAIN[/list]
<ul>[*]<a class="menu2two" href="#nogo">Products
</a>
	<table><tr><td>
	<ul>
	[*]Mobiles
	[*]Photoframes
	[*]Tripods
	[*]Memory cards
	[*]Camcorders
	[/list]
	</td></tr></table>

[*]<a class="menu2three" href="#nogo">Services
</a>
	<table><tr><td>
	<ul>
	[*]Photography
	[*]Video editing
	[*]Web site Design
	[*]Reference guides
	[*]Photo-editing
	[/list]
	</td></tr></table>

[*]Contact us[*]Site map[*]<a class="menu2six" href="#nogo">News
</a>
	<table><tr><td>
	<ul class="endstop">
	[*]Breaking
	[*]Latest
	[*]May 2006
	[/list]
	</td></tr></table>

[/list]

</div>
</body>
</html>

Credo che si debba intervenire nel .css. Tra l'altro, sono due giorni che ci lavoro per apportare le modifiche (specie di style) in base alle mie esigenze. Ma essendoci due paragrafi differenti di style, credo in riferimento ai diversi browser, non vorrei aver commesso delle inesattezze (diversità) tra l'uno e l'altro.

Ovviamente i link del menu sono puramente indicativi, non li ho ancora modificati.

Giuro, cerco menu da giorni ormai, è questo mi è sembrato davvero il più chiaro e soprattutto il più personalizzabile; spero di non doverlo abbandonare e che ci sia una soluzione.

Grazie.

[Mich_]

Ora ti dico come interpreto io il tuo discorso.

Visto che ho trovato una cosa intelligente, accessibile, che funziona in tutti i browser, la uso, ma butto via l'accessibilta` e il fatto che funzioni dappertutto e me la voglio adattare alle mie cattive abitudini.

Per farlo funzionare in tutte le pagine, puoi usare SSI, ma meglio sarebbe PHP o ASP (cosi` puoi adattare il menu all apagina che lo contiene).

Comunque non e` possibile con i CSS far uscire i blocchi dal documento in cui sono inseriti (che e` quello che vorresti fare facendoli uscire dal frame).

[SERIALit]

Cavolo, sapevo sarebbe andata a finire così Come mai è impossibile?

Lo farei quello che dici tu se sapessi come fare. purtroppo io di quei linguaggi proprio non so nulla

[SERIALit]

Stavo pensando, pensiero assurdo, lo so, ma non esiste neppure un modo per richiamare da un file esterno i link che devono essere inseriti nel menu css?

[Mich_]

Certo che esistono, ma non in HTML.

In qualsiasi linguaggio lato server (compreso SSI, che praticamente e` supportato da tutti i webserver) puoi scrivere una cosa del tipo:

(la sintassi esatta cambia a seconda del linguaggio usato).

A quel punto la pagina non e` HTML (e non ha estensione .htm o .hlml), ma il resto della pagina deve essere HTML corretto, dato che viene poi letta dal browser come HTML contenente il pezzo incluso.
Puo` essere una pagina .php o .asp o .ssi o del tipo previsto dal webserver/linguaggio lato server.

[SERIALit]

Capito. Altra piccola curiosità. Nelle tendine sono ammesse delle line? Non so, utilizzando <hr> ad esempio, perché vorrei separare voci con una linea bianca.

[SERIALit]

E in ultimo, poi giuro che non rompo più:

E' possibile impostare una delle voci del menu con i colori dell'hover? Mi spiego, fare in modo che quella voce appaia sempre come se sia selezionata. Quale classe del css devi richiamare?

[SERIALit]

Oddio, credo di aver risolto, o meglio, di aver pensato ad una soluzione... Ora mich mi sbrana E se il sottomenu, invece che verticalmente, lo facessi uscire orizzontalmente? Si può? Ormai sono in pieno delirio

[Mich_]

Il tag <tr> e` un po` discusso: infatti e` un tag che crea una formattazione. Pero` in via transitoria (fino a che esce XHTML 2 con il <separator>) si puo` usare. o si puo` usare un apposito <div> con classe CSS specifica.

Per i colori dell'hover su un link specifico, devi farlo assegnando una apposita classe con il programma lato server (PHP o ASP): in questo caso SSI non e` sufficiente.
Si puo` anche realizzare tramite JS (assegnando una classe dopo che la pagina e` caricata).

Per menu orizzontali, prova a vedere le raccolte (tra i "link utili"). Tutto si puo` fare, ma occorre essere padroni dello strumento, prima di apportare modifiche importanti.