Creación de submenus en Html

Hola Juan soy Hernán Camilo saludos desde Colombia quiero preguntarle como hago para que los submenus que tengo en el siguiente html se me desplieguen hacia la derecha y ni me aparezcan abajo ,,,me explico debe de aparecer un menú con los siguientes elementos (Pagina, Archivos, Categorías, Meta),
el usuario al seleccionar Página deberá desplazarse hacia la derecha los siguientes elementos del submenú: (Agenda, Audios mp3, Fotografías, Videos Nutrilife, Videos Om)
el usuario al seleccionar Archivos deberá desplazarse hacia la derecha los siguientes elementos del submenú: (Marzo 2012, Abril 2012)
el usuario al seleccionar Categorías deberá desplazarse hacia la derecha el siguiente elemento del submenú: (Noticias)
el usuario al seleccionar Meta deberá desplazarse hacia la derecha el siguiente elemento del submenú: (Acceder)..
El código que tengo es el siguiente pero no me los desplaza a la derecha sino que me los muestra hacia abajo y la idea es que el submenú se despliegue hacia la derecha:
<script type="text/javascript"> //<![CDATA[ var bldespll; var bldespll2=-200; function blcnbotndesplegg() { if (bldespll==2) { bldespll=-2} else {bldespll=2}; document.getElementById("blmenuflntdesplegab") .style.top=parseInt(document.getElementById("blmenubt").style.top)+30+"px"; document.getElementById("blmenuflntdesplegab").style.visibility="visible"; blnlacc() } function blnlacc(){ bldespll2=bldespll2+4*bldespll; if(bldespll2 <- 200) {bldespll2=-200}; if(bldespll2 > 0) {bldespll2=0}; document.getElementById("blmenuflntdesplegab").style.left=bldespll2+"px"; if (bldespll2 <=-200 || bldespll2 >=0) {window.clearTimeout() } else {window.setTimeout("blnlacc();",50);} } //]]> </script> <style>#blcnenlace{font-family:Arial,helvética,sans-serif; font-size:12px; border-bottom:1px solid #CCCCCC;} #blcnenlace a{text-decoration: none; color: #333333;}#blcnenlace:hover{border-bottom: 1px solid #9D9D9D;}</style> <div style="left: 0px; top: 100px; position: fixed;" id="blmenubt"> <a title="Desplegar Menú" onclick="blcnbotndesplegg();" href="javascript:void(0)"> <img src=""></a> </div> <div style='background: url("") no-repeat 0px 0px rgb(238, 238, 238); visibility: hidden; position: fixed; z-index: 1;' id="blmenuflntdesplegab"> <table style="padding: 5px; border: 1px solid rgb(157, 157, 157); width: 150px; text-align: center;"> <table style="padding: 5px; border: 1px solid rgb(157, 157, 157); width: 150px;"> <ul> <li><a><div align="center">Página</div></a> <ul> <li><a href=" http://blognutrilife.blogspot.com/p/agenda.html"><div align="center">Agenda</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/audios-mp3.html"><div align="center">Audios mp3</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/fotografias.html"><div align="center">Fotografías</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/video-nutrilife.html"><div align="center">Videos Nutrilife</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/videos-omnilife.html"><div align="center">Videos OM</div></a></li> </ul> <li><a><div align="center">Archivos</div></a> <ul> <li><a href=" http://blognutrilife.blogspot.com/p/blog-page.html"><div align="center">Abril 2012</div></a></li> <li><a href=" http://blognutrilife.blogspot.com/p/marzo-de-2012.html"><div align="center">Mayo 2012</div></a></li> </ul> <li><a><div align="center">Categorías</div></a> <ul> <li><a href=" http://blognutrilife.blogspot.com/p/noticias.html"><div align="center">Noticias</div></a></li> </ul> <li><a><div align="center">Meta</div></a> <ul> <li><a href=" http://blognutrilife.blogspot.com/p/agenda.html"><div align="center">Acceder</div></a></li> </ul> </li></ul></table></div>

Gracias de antemano por tu ayuda y muchas bendiciones...

1 Respuesta

Respuesta
1

Hice un menu vertical con submenú, para que lo veas y saques el código de mi pagina:

http://juangarciar.com/taller/menu_css_html/

Gracias Juan igualmente ayer probé este código :

<style type="text/css">
/* Menú */
#menu h2{display:none}
#menu ul{list-style:none;width:200px;margin:0;padding:0;}
#menu a{color:#fff;background:#00f;border:#009 solid 1px;text-align:center;text-decoration:none;width:200px;display:block;outline:none;}
#menu a:hover{color:#000;background:#0f0;border:#090 solid 1px;}
#menu a:focus, #menu a:active{color:#000;background:#f00;border:#900 solid 1px;}
/* Submenú desplegable*/
#menu ul li ul{display:none;position:absolute;margin-left:202px;margin-top:-21px;}
#menu ul li:hover ul{display:block;}
#menu li ul a{color:#fff;background:#99f;border:#00f solid 1px;}
#menu li ul a:hover{color:#000;background:#9f9;border:#0f0 solid 1px;}
#menu li ul a:focus, #menu li ul a:active{color:#000;background:#f99;border:#f00 solid 1px;}
</style>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<div id="menu">
<h2>Menú</h2>
<ul>
<li><a>Uno</a>
<ul>
<li><a>1.Uno</a></li>
<li><a>1.Dos</a></li>
<li><a>1.Tres</a></li>
</ul>
</li>
<li><a>Dos</a>
<ul>
<li><a>2.Uno</a></li>
<li><a>2.Dos</a></li>
</ul>
</li>
<li><a>Tres</a>
<ul>
<li><a>3.Uno</a></li>
<li><a>3.Dos</a></li>
<li><a>3.Tres</a></li>
<li><a>3.Cuatro</a></li>
<li><a>3.Cinco</a></li>
</ul>
</li>
<li><a>Cuatro</a>
<ul>
<li><a>4.Uno</a></li>
<li><a>4.Dos</a></li>
<li><a>4.Tres</a></li>
</ul>
</li>
<li><a>Cinco</a>
<ul>
<li><a>5.Uno</a></li>
<li><a>5.Dos</a></li>
<li><a>5.Tres</a></li>
<li><a>5.Cuatro</a></li>
</ul>
</li>
</ul>
</div></!doctype></!doctype>

Que lo puse en mi web y que a pesar de que funciona bien cuando voy a acomplar en mi código (el que te envíe arriba) no me muestra los desplazamientos hacia la derecha me muestra como te decía ayer en la parte inferior los submenus la idea es conservar el código que tengo por que si puedes ver ese menú es muy elegante es desplegable y me gustaria para impresionar a mis clientes..

Gracias..

Bueno primero preguntarte si agregaste el css del menu que me mostrarte y lo otro es que te recomiendo que le asignes clases o ids a los ul o li para que no tengas problemas y al leer la web haga algo que no quieres.

Saludos cordiales!

Ve el menu que te mostré en mi web, fijate que asigno id y clases a los ul, li y todo.

JuanGarciaR

Gracias Juan lo de las CSS de verdad no veo donde crear ese codigo,,, por otra parte cuando aplico lo de las clases a los ul y a los li en una archivo en un block de notas aunque no se despliega como deseo, los submenus se ve con una sangria agradable pero cuando lo incluyo en la pagina que estoy realizando se ve igual a como lo tenia en el código que te envie,,,

Gracias

Creo que tienes problema con el css, al parecer no conoces muy bien eso.

Voy a realizar un tutorial mas adelante sobre esto.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

¿Por que no me funciona el javascript en firefox?

Estoy haciendo una pagina web y he hecho un menu con javascript, pero no consigo que funcione en FIREFOX, en IE, en safari, chrome me funciona. Pero me tiene que funcionar en firefox ya que es uno de los que mas se usan. ¿Veis algun fallo o me falta...
1 respuesta

Problemas con menu en css

Tengo un código de un menu desplegable, consta de un código html y otro css: Código html: <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="./estilos/menudesplegable3.css"> </head> <body style=" font-family: arial;...
1 respuesta

Tabs con jquery

Te pregunto de nuevo porque estoy intentando que me funcione un sistema de tabs -. El ejemplo es muy simple, pero era sólo para probarlo antes de realizar los "verdaderos"- pero no hay manera de que me funcione. Es un código que he reutilizado y he...
2 respuestas

Tablas Especiales

Quisiera crear en mi Website una tabla como la que hay en la siguiente web: - www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"... El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras...
2 respuestas

Posición de un div

Mi problema es sencillo pero no logro solucionarlo es el siguiente tengo una tabla <tabla> <tr> <td> <div class=menu9" ></div> </td> <td> un formulariio extenso </td> <tr> Resulta que el menu me sale en la mitad de la primera columna yo quiero que se...
1 respuesta

Fijar un div o tabla para q no se cambie el ancho

Te escribo nuevamente por lo siguiente, estoy haciendo un blog, entonces la parte de los post, es decir de los registros del blog estaran del lado izquierdo, para poner otras cosas del lado derecho, la pregunta es: cuando hago un contenido muy largo...
1 respuesta

Sobre el diseño del encabezado

Miquelcala. Me podrías ayudar sobre el código del diseño del encabezado en css3, es decir el logotipo de mi página me gustaría que estuviera a la izquierda y el menú que estuviera debajo del logotipo, el cual en este momento se encuentra a la...
1 respuesta

¿Cómo hago un caja con css?

Estoy haciendo una web de divulgación, el dissenño es sencillo una foto de fondo i un box de margenes redondos al centro. Ahí va mi problema, ¿No se como hacer el box ni como ponerlo centrado ni como puedo poner que el menu se adapte al tamaño del...
1 respuesta

Tengo problemas cuando bajo el zoom en un navegador y me deforma las columnas

Que tengo que no Logro averiguar lo que le pasa, te Explico: Tengo un div contenedor con una anchura de 960px, dentro de ella tengo dos columnas flotando a cada lado, cada una de ella con 480px que haría un total de 960px, justo el tamaño de su...
1 respuesta

Cargar en un div una página html, desde una barra de menú

Estoy armando un sitio en html con css. La página "inicio.html" posee un menú que tiene cuatro alternativas. La idea es que cada una de estas alternativas traiga un html y lo muestre dentro de un div. Esto lo he realizado en php y ahí utilizaba...
1 respuesta