Ciao,
ho incrociato insieme due tipi di menu, per essere precisi sono partito da questo presentato su Html.it: http://css.html.it/articoli/leggi/23...umb-con-i-css/
e lvisto che volevo un menu a tendina a doppio livello (cioè che passando il mouse su ogni elemento del menu mi si apra un sotto menu verticale) l'ho incrociato con questo:
http://www.cssplay.co.uk/menus/drop_definition.html (il codice di questo lo potete vedere semplicemente visualizzando il codice dal broswer se volete).

Per me come principiante è stato un po' un lavoraccio lungo e faticoso perchè ho dovuto cambiare notevolmente la struttura logica del primo menu mantenendone comunque l'asppetto grafico e l'effeto stile rollover ma alla fine sono riuscito a tirar fuori qualcosa di pseudo decente data la mia inesperienza con i CSS, potete visualizzare quà il mio risultato: http://www.siatec.net/andrea/archivio/menu/menu.html

Vi chiedo un parere sul mio risultato e sull'idea e una manina a sistemare gli ultimi dettagli estetici che non riesco a risolvere da solo...

Le cose che non mi tornano e che vorrei cambiare sono:

1) La disposizione del testo degli elementi nel menu principale (DEMOS, MENU, LAYOUT,...) se vedete a sinistra c'è molto spazio...vorrei ottenere qualcosa come su http://www.siatec.net/andrea/archivio/megattera/ (che fa uso semplicemente del primo tipo di menu) dove i "titoli" di ogni elemento del menu sono ben centrati.

2)Quando si passa il mouse su un elemento del menu si apre una tendina blu verticale con il relativo sotto menu, con i CSS sarebbe possibile renderla lievemente trasparente tale tendina (cioè sempre blu ma con una certa trasparenza che lasci intravedere quello che c'è sotto)

Avete qualche altra idea per migliorarne l'aspetto estetico?

Vi allego il mio codice XHTML e CSS:

XHTML:
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu multilivello</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link href="layout.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>

<ul id="menu">[*]
<dl class="gallery">
	<dt class="one" id="mouse">DEMOS</dt>
	<dd>zero dollars</dd>
	<dd>wrapping text</dd>
	<dd>styled form</dd>
	<dd>active focus</dd>

	<dd>shadow boxing</dd>
	<dd>image map</dd>
	<dd>fun with backgrounds</dd>
	<dd>fade scrolling</dd>
	<dd class="last">em sized images</dd>
</dl>

[*]
<dl class="gallery">
	<dt class="two" id="mouse">MENUS</dt>
	<dd>spies menu</dd>
	<dd>vertical menu</dd>
	<dd>enlarging list</dd>
	<dd>link images</dd>

	<dd>non-rectangular links</dd>
	<dd>jigsaw links</dd>
	<dd class="last">circular links</dd>
</dl>

[*]
<dl class="gallery">
	<dt class="three" id="mouse">LAYOUTS</dt>

	<dd>Fixed 1</dd>
	<dd>Fixed 2</dd>
	<dd>Fixed 3</dd>
	<dd>Fixed 4</dd>
	<dd class="last">minimum width for Internet Explorer</dd>
</dl>

[*]
<dl class="gallery">
	<dt class="four" id="mouse">MOZILLA</dt>
	<dd>drop down menu</dd>
	<dd>cascading menu</dd>
	<dd>content:</dd>
	<dd>mozzie box</dd>

	<dd>rainbow box</dd>
	<dd>snooker cue made using border art</dd>
	<dd class="last">target practise</dd>
</dl>
[/list]

</body>
</html>
CSS:
codice:
body{
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	font-size: 80%;
	color: #000;
}

ul#menu{
    list-style-type:none;
	padding:0;
	float: left;
	width: 760px;
	height: 40px;
    line-height: 40px;
	background: #D4D4D4 url("img/bcbk.png");
}

ul#menu li{
   float: left;
   height: 40px;
   margin: 0 0.2em 0;
   padding: 0;
   background: url("img/bcbk1.png") no-repeat top right;
   color: #777;
   text-decoration: none;
}

ul#menu li:hover{
   background-position: bottom right;
   color: #0876AC;
}

ul#menu li a{
   text-decoration: none;
}

ul#menu li a:visited{
   text-decoration: none;
}

ul#menu li dd{
   display: none;
}

ul#menu li:hover, ul#menu li a:hover{
   border: 0;
}

ul#menu li:hover dd, ul#menu li a:hover dd{
   display: block;
}

ul#menu li:hover dl, ul#menu li a:hover dl{
   padding-bottom: 20px;
}

ul#menu table{
   border-collapse:collapse; 
   padding:0; 
   margin:-1px; 
   font-size:1em;
}

ul#menu dl{
   width: 150px; 
   margin: 0; 
   padding: 0;  
   text-align:center; 
   cursor:pointer;
}

ul#menu dt{
   margin:0; 
   padding: 0; 
   font-size: 1.1em; 
   color: #fff; 
}

ul#menu dd{
   margin: 0; 
   padding: 0;
   color: #FFFFFF 
   font-size: 1em; 
   background: #47a; 
   text-align: left;

}

ul#menu dd.last{
   border-bottom: 1px solid #444;
}

.gallery dt a, .gallery dt a:visited{
   display:block; 
   color:#444;
}

.gallery dd a, .gallery dd a:visited{
   color:#fff; 
   text-decoration:none; 
   display:block; 
   padding:4px 5px 4px 20px;
   background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}

.gallery dd a:hover{
   background: #258 url(arrowr.gif) no-repeat 11px 10px; 
   color:#9cf;
}
Grazie mille
Andrea