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