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:

codice:
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:

codice:
<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.