Ok. Muchas gracias.
Estas son las imágenes de como queda el menu.
Y aqui esta mi codigo:
html:
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var menuids=["menutopb"]
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px"
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
</head>
<body>
<div id="container">
<div id="menutop">
<ul id="menutopb">
<li class="pequeño"><a href="#">La Empresa</a></li>
<li class="pequeño"><a href="#">Alojamiento</a>
<ul>
<li><a href="#">Habitaciones</a></li>
<li><a href="#">Precios</a></li>
<li><a href="#">Servicios</a></li>
</ul>
</li>
<li class="grande"><a href="#">Instalaciones y Servicios</a></li>
<li class="grande"><a href="#">Ofertas Especiales</a></li>
<li class="pequeño"><a href="#">Entorno</a></li>
<li class="pequeño"><a href="#">Banquetes</a></li>
</ul>
<br style="clear: left;" />
</div>
<div id="logo"> </div>
<div id="banner"></div>
.
.
.
.
CSS:
body{
text-align:center;
}
/*menu horizontal */
#menutop ul{
margin: 0;
padding: 0;
float: right;
list-style-type: none;
width:570px;
}
#menutop ul li{
position: relative;
display: inline;
float: left;
font-family: Arial;
font-size: 11px;
color:#235F39;
margin: 0 13px 0 0;
padding: 0 13px 0 0;
}
#menutop ul li a{
display: block;
text-decoration: none;
color:#235F39;
}
#menutop ul li ul{
left: -15px;
position: absolute;
display: block;
visibility: hidden;
}
#menutop ul li ul li{
display: list-item;
float: none;
width:70px;
background: #FFFFFF url(images/submenu.gif) no-repeat center;
color:#C2BD42;
text-align:center;
padding:0 0 0 3px;
margin:2px 2px 2px 2px;
}
#menutop ul li ul li a{
display: block;
color:#C2BD42;
text-decoration: none;
}
#menutop ul li a:hover{
}
/* IE */
* html .menutop ul li { float: left; height: 1%; }
* html .menutop ul li a { height: 1%; }
* html .menutop ul li ul li { float: left;}
/*fin top menu */
#container {
position:relative;
left:0px;
top:0px;
width:751px;
height:390px;
margin-left:auto;
margin-right:auto;
}
#menutop {
position:absolute;
left:0px;
top:0px;
width:751px;
height:13px;
z-index:3;
}
#logo {
position:absolute;
background:#FFFFFF url(images/logo.gif) no-repeat;
left:0px;
top:13px;
width:174px;
height:131px;
border-top:#99CCCC solid 1px;
z-index:1;
}
#banner {
position:absolute;
background:#FFFFFF url(images/banner.jpg) no-repeat;
left:174px;
top:13px;
width:577px;
height:131px;
border-top:#99CCCC solid 1px;
z-index:2;
}
#leftnav {
background-color:#D1E8E8;
position:absolute;
left:0px;
top:144px;
width:174px;
height:211px;
border-left:#99CCCC solid 1px;
}
#contenido {
background:#FFFFFF url(images/fondo.jpg) no-repeat;
position:absolute;
left:174px;
top:144px;
width:577px;
height:211px;
border-bottom:#99CCCC solid 1px;
}
.