Menu desplegable sobre imagen

Simon_Echecopar · #1 (**permalink**) 29/05/2012, 14:39

Aqui muestro el resultado que tengo,

Aqui muestro el codigo

Código HTML:

<!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" lang="en" xml:lang="en">
 <head>
  <title>Prueba de Menu desplegable</title>
  <script type="text/javascript" language="javascript" src="codigo.js"></script> 
  <!--<link href="Menus.css" rel="stylesheet" type="text/css">-->
 </head>
 <script type="text/javascript" language="javascript" src="script09.js"></script>
 <script type="text/javascript">
   function mostrar(nombreCapa) 
   { 
    nombreCapa=nombreCapa; 
    document.getElementById(nombreCapa).style.display="block"; 
   } 
   
   function cerrar(nombreCapa) { 
    nombreCapa=nombreCapa; 
    document.getElementById(nombreCapa).style.display="none"; 
   } 

   function evalua(nombreCapa,chk)
   { 
    nombreCapa=nombreCapa; 
    if (document.getElementById(nombreCapa).style.display == "none") 
	{                         
     mostrar(nombreCapa); 
    }else{ 
     cerrar(nombreCapa); 
    } 
   } 
 </script>
 <style type="text/css">
  body 
  {
   background:#FFFFFF;
   width:100%
   height:100%;
   margin:0;
   /*background: url(gradAzulGreen.jpg) repeat-y scroll 0;*/
  }
  #degradado 
  {
   height: 100%
   width: 100%;
   min-height:900px;
   background: url(gradienteAzul.jpg) repeat-y scroll 0;
   margin:1;
  }
     
  #content
  {
   max-height:600px;
   max-width:750px;
   height:480px;
   background: url(EsTxt.jpg) no-repeat;
   margin:1;
   display:block;
   text-decoration: none;
   font-weight: bold;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
  }
  /* Root = Horizontal, Secondary = Vertical */
  ul#menu 
  {
   margin: 0;
   border: 0 none;
   padding: 0;
   /*  ahora esta en 737px width: 500px; For KHTML with 360px*/
   width:735px;
   list-style: none;
   height: 1%;
   border:1px solid #55E;/* Original #eee*/
   padding-bottom:5px;
  }

  ul#menu li 
  {
   margin: 0;
   border: 0 none;
   padding: 0;
   float: left; /*For Gecko*/
   display: block;
   list-style: none;
   position: relative;
   height: 20px;
  } 
  ul#menu li
  {
   padding-bottom:4px;
  }
  ul#menu li:hover
  {
   background:#FFF;/* Original #eee */
  }
  ul#menu ul 
  {
   margin: 0;
   border: 0 none;
   padding: 0;
   width: 5px;
   list-style: none;
   display: none;
   position: absolute;
   top: 25px;
   left: 10px;
   background: #EEE;/* Original #eee */
   border: none;
   opacity: 0.8;
   -moz-opacity: 0.8;
   filter:alpha(opacity=80);
  }

  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: 50px;
   float: left; /*For IE 7 lack of compliance*/
   display: block !important;
   display: inline; /*For IE*/
  }

  /* Root Menu */
  ul#menu input
  {
   padding: 2px 7px 2px;
   float: none !important; /*For Opera*/
   float: left; /*For IE*/
   display: block;
   background:#00AAFF;/*Verde: #99FF99 Azul: #00AAFF*/
   color: #003300;/* original #9FCF21 */
   text-decoration: none;
   font-weight: bold;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   /*border-right:1px solid #818181;*/
   text-decoration: none;
   height: auto !important;
   height: 1%; /*For IE*/
   
  }

  /* Root Menu Hover Persistence */
  ul#menu input:hover,ul#menu li:hover input,ul#menu li.iehover input 
  {
   color: #009900;/*Original #003300*/
  }

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

  /* 2nd Menu Hover Persistence */
  ul#menu li:hover li a:hover input:hover, ul#menu li:hover li:hover input, ul#menu li.iehover li a:hover, ul#menu li.iehover li.iehover input 
  {
   background:#55A;/* Original #ddd */
   color: #003300;/* Original #003300 */
  }

  /* 3rd Menu */
  ul#menu li:hover li:hover li input, ul#menu li.iehover li.iehover li input 
  {
   background: #55A;/* Original #EEE */
   color: #003300;/* Original #666 */
  }

  /* 3rd Menu Hover Persistence */
  ul#menu li:hover li:hover li a:hover input:hover, ul#menu li:hover li:hover li:hover input, ul#menu li.iehover li.iehover li a:hover,ul#menu li.iehover li.iehover li.iehover input a
  {
   background:#55A;/* Original #ddd */
   color: #003300; /* Original #FFF */
  }
  /* 4th Menu */
  ul#menu li:hover li:hover li:hover li input, ul#menu li.iehover li.iehover li.iehover li input a
  {
   background:#55A;/* Original #ddd */
   color: #003300; /* Original #ddd */
  }
 
  /* 4th Menu Hover */
  ul#menu li:hover li:hover li:hover li input:hover, ul#menu li.iehover li.iehover li.iehover li a:hover 
  {
   background: #55A;/* Original #CCC */
   color: #003300; /* Original #FFF */
  }

  ul#menu ul ul, ul#menu ul ul ul 
  {
   display: none;
   position: absolute;
   top: 0;
   left: 160px;
  }

  /* 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: #003300;
  }
 </style>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <body>
  <center>
   <div id="degradado" name="degradado">
   <table>
    <tr>
	 <td colspan="2" align="center">
       <div id="cabecera"><a href="index.html" value="Logo"><img src="cabezera.jpg"></a></div>
	   <form action="#">
        <div id="menu" name="menu" > 
         <ul id="menu" name="menu" style="position:relative; z-index:10px;background: url(Menu.png) no-repeat;height:100PX" align="center">
	      <li align="Center"><input type="button" value="Nosotros">
	       <ul>
	        <li><input type="button" value="Mision"></li>
	        <li><input type="button" value="Vision"></li>
	        <li><input type="button" value="Valores"></li>
	       </ul>
	      </li>
	      <li><input type="button" value="Proyectos realizados">
	       <ul>
	        <li><input type="button" value=" "></li>
	        <li><input type="button" value=" "></li>
	        <li><input type="button" value=" "></li>
	        <li><input type="button" value=" "></li>
	       </ul>
	      </li>
	      <li><input type="button" value="Servicios">
		   <ul>
	        <li><input type="button" value="Domotica"></li>
	        <li><input type="button" value="Diseño"></li>
			<li><input type="button" value="TI"></li>
	        <li><input type="button" value="Eventos"></li>
			<li><input type="button" value="Ingenieria"></li>
			<li><input type="button" value="Sustentabilidad"></li>
	       </ul>
		  </li>
		  <li><input type="button" value="Productos">
		   <ul>
	        <li><input type="button" value="Domotica"></li>
	        <li><input type="button" value="Diseño"></li>
			<li><input type="button" value="TI"></li>
	        <li><input type="button" value="Eventos"></li>
			<li><input type="button" value="Ingenieria"></li>
			<li><input type="button" value="Sustentabilidad"></li>
	       </ul>
		  </li>
	      <li><input type="button" value="Casos de Exito">
		   <ul>
	        <li><input type="button" value="Ohm Cafe"></li>
	        <li><input type="button" value=" "></li>
	        <li><input type="button" value=" "></li>
	        <li><input type="button" value=" "></li>
	       </ul>
		  </li>
	      <li><input type="button" value="Noticias y Eventos"></li>
 	     <li><input type="button" value="Participa!!!"></li>
        </ul>	
       </div>
	  </form>
     </td>
    </tr>
    <tr>
     <td colspan="2" align="center">
      <div id="content" name="content" align="Justify"></div>
     </td>
    </tr>
   </table></div>
  </center>
 </body>
</html>

Mi problema es como sentro el menu en la imagen