Incredibile io che pensavo di capirne un po di css, invece mi accorgo di non aver capito nulla.
Sto cercando di fare un web validato al 100% w3c.

Il mio problema sorge sul menu dropdown orizzontale, fatto interamente in css, dopo svariati tentativi NON sono riuschito a:

1- aumentare l'altezza di questo menu, senza perdermi per strada il sottomenu che compare ora nel top pagina....nonche ad accentrare verticalmente il testo rispetto alla casella.
2- metterlo dentro un'altro layer posizionabile ovunque nella pagina o centrarlo.


mi sto esaurendo aiutato, chiedo aiuto a voi veterani.

codice:
<head>
<style type="text/css">

.pro_line4 {
height:36px; 
display:table; 
margin:0 auto; 
padding:0;
font-family:arial, verdana, sans-serif; 
font-size:11px;
z-index:500;
}

.pro_line4 .select {
margin:0; 
padding:0 0 0 20px; 
list-style:none; 
white-space:nowrap;
}

.pro_line4 li {
float:left;
background:url(line/blank_over_sepia.gif);
}

.pro_line4 .select a {
display:block; 
height:36px; 
float:left; 
background: url(line/blank_sepia.gif); 
padding:0 0 0 15px; 
text-decoration:none; 
line-height:25px; 
white-space:nowrap; 
color:#ddd;
}

.pro_line4 .select a b {
display:block; 
padding:0 30px 10px 15px; 
background:url(line/blank_sepia.gif) right top;
}

.pro_line4 .select a:hover, 
.pro_line4 .select li:hover a {
background: url(line/blank_over_sepia.gif); 
padding:0 0 0 15px;
line-height:27px;
cursor:pointer; 
color:#fff;
}

.pro_line4 .select a:hover b, 
.pro_line4 .select li:hover a b {
display:block; 
padding:0 30px 9px 15px; 
background:url(line/blank_over_sepia.gif) right top; 
cursor:pointer;
}

.pro_line4 .sub {
display:none;
 
margin:0 auto; 
padding:0;
}

/* IE6 only */
.pro_line4 table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.pro_line4 .sub {
margin:0; 
padding:0 0 0 60px;
list-style:none;
}
.pro_line4 .sub li {background:transparent;}

.pro_line4 .select :hover .sub {
height:18px;
display:table; 
margin: 0 auto; 
padding:0;
width:750px;top:28px; 
left:0; 
text-align:center;
}

.pro_line4 .select :hover .sub li a 
{display:block;height:18px; line-height:16px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; border:1px solid #000; border-color:#888 #777 #666 #ddd; color:#888;font-size:10px;}

.pro_line4 .select :hover .sub li a:hover 
{color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px;}

</style>
</head>

<div align="center">
<div class="pro_line4">
<ul class="select">[*]Home[*]Joseph Turner

	<ul class="sub">
		[*]Fishermen at Sea
		[*]The Shipwreck
		[*]The Vale of Ashburnham
		[*]Crossing the Brook
	[/list]

[*]John Constable

	<ul class="sub">
		[*]The Hay Wain
		[*]Brighton Beach
		[*]Malvern Hall
		[*]Salisbury Cathedral
		[*]Weymouth Bay
	[/list]

[*]Henri Matisse

	<ul class="sub">
		[*]The Girl with Green Eyes
		[*]The Dream
		[*]Woman in Blue
		[*]The Yellow Dress
		[*]The Piano Lesson
	[/list]

[*]Paul Cezanne

	<ul class="sub">
		[*]The Large Bathers
		[*]Onions and Bottles
		[*]Mardi Gras
		[*]Still Life
		[*]Boy in a Red Waistcoat
	[/list]

[/list]
</div></div>
questo menu l'ho preso da QUI