Establcer niveles, con una tabla y con un iframe???

En la hoja html principal-index. He de aclarar que el menú desplegable esta introducido en un iframe dentro de la página. Esto en una página no tiene sentido pero si pones el mismo menú en muchas páginas diferentes si que lo tiene. Porque si modificas el iframe (entiéndase la página o código que incrusta el iframe) se modifican en todas y te ahorrar horas de trabajo. Mas adelante pongo el código que contiene el iframe.

Código:

<!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=utf-8" />

<title>The Gallery</title>

<link rel="StyleSheet" href="general.css" media="all" type="text/css">

</head>

<body>
<br />

<center>

<img src="img/ptl/the_galleri_index.png" alt="imagén encabezado página." width="500" longdesc="Esta es la imágen que enzabeza la página y que contiene el nombre y estilo de nuestra web." />


<div id="div_menu" align="center"><iframe id="menu" src="menu.htm"   frameborder="0" scrolling="no"></iframe></div>
<p><br />
</p>

<div id="div_cont"><table id="table_p" style="z-index:0">
<td>

Bueno, aquí va el contenido en cuestión, lo suprimo para abreviar el código. 

</td>
</table></div>
</center>


</body>
</html>

En la hoja de estilos correspondiente al menú desplegable:

Código:

@charset "utf-8";
/* CSS Document */

/* Root = Horizontal, Secondary = Vertical */

ul#menu {
  margin: 0;
  border: 0 none;
  padding: 0;

/*  width: 500px;*/ /*For KHTML*/

width:600px;
  list-style: none;
  height: 50px;
  border:0px;
  padding-bottom: 5px;
}

ul#menu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/ 

  display: inline;
  list-style: none;
  position: relative;
  height: 35px;
}
ul#menu li{
	padding-bottom:5px;
}
ul#menu li:hover{
	background: #FFFFFF;
}

ul#menu  ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: relative;
  top: 0px;
  left: 15%;  
  background: #FFFFFF;
  border: none;
}

ul#menu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
  
}

ul#menu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#menu a {
  padding: 5px 15px 5px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight:bold;
/*  border-right:1px solid #818181;*/
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
color: #000000;

}

/* 2nd Menu */
ul#menu li:hover li a,
ul#menu li.iehover li a {
  float: none;
  border:none;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
	background: #CCCCCC;
	color: #000000;
}


/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
  display: none;
}

ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
  display: block;
}
ul#menu .selected{
	color: #FFFFFF;
}

En el html del menú desplegable, este esta en el iframe.

Código:

<title>Documento sin t&iacute;tulo</title>


<link rel="StyleSheet" href="estilos_menu_desplegable.css" media="all" type="text/css">

</head>

<center><
<ul id="menu">
	<li><a class="selected" href="index.html" target="_top">Inicio</a></li>
	<li><a href="#" class="Estilo1">Secciones</a>
		<ul>
			<li><a href="#">Artístas</a></li>
			<li><a href="pags/secciones/obras.html" target="_top">Obras</a></li>
            <li><a href="#">Galería</a></li>
            <li><a href="#">Eventos</a></li>
		</ul>
</li>
<li><a href="#">Enlaces</a>
	<ul>

		<li><a href="#">DreamsLake</a></li>
		<li><a href="http://www.vice.com/es" target="_blank">Vice</a></li>
        <li><a href="http://www.go-mag.com/" target="_blank">Go!</a></li>
	</ul></li>

<li><a href="#">Contacto</a>	

</li>
</ul>
</center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br />
</p>
</body>
</html>

Bueno estan las cosas sin terminar como podreís ver.

y en la hojas de estilos general:

Código:

@charset "utf-8";
/* CSS Document */

#menu{
	width: 800px;
	height: 300px;
	background-color: transaparent;
	margin-left:0;
	margin-right: 0;
	outline-color:#000000;
	z-index:1;
}

#table_p{
	width:60%;
	text-align:left;
	border:0px;
	position:inherit;
	margin:-200px;
	z-index:0;
}

body {
	background-color:#000000;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:20px;
	text-align:left;


}

#text_p{
	background-color:#FFFFFF;
	color:#000000;
	

}

A:link {
	font-family: Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-decoration: none;
}
A:visited {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;
}
A:active {
	font-family: Arial, Helvetica, sans-serif;
	color:#FF3300;
	font-weight: normal;
	text-decoration: none;
}
A:hover {
	font-family: Arial, Helvetica, sans-serif;
	color:#FF3300;
	font-weight: normal;
	text-decoration: none; 
	}


#img_p_l{
	float:right;
	margin-left:10px;
	border:0px;
	
	}

#img_p_r{
	float:left;
	margin-right:10px;
	border:0px;