Foros del Web » Creando para Internet » HTML »

ayuda menu horizontal

Estas en el tema de ayuda menu horizontal en el foro de HTML en Foros del Web. Hola tengo un menu horizontal y quiero sacarle al submenu otro menu pero no sale como puedo hacerlo? aqui les tengo el codigo Código: <html> ...
  #1 (permalink)  
Antiguo 13/07/2008, 17:18
 
Fecha de Ingreso: enero-2005
Mensajes: 386
Antigüedad: 13 años, 9 meses
Puntos: 3
ayuda menu horizontal

Hola tengo un menu horizontal y quiero sacarle al submenu otro menu pero no sale como puedo hacerlo?
aqui les tengo el codigo

Código:
<html>
<head>
<title>::Itver Programa de Tutorias::</title>
<style type="text/css">
/* menú */
#menu ul{list-style:none;margin:0;padding:0;overflow:hidden;}
#menu li{float:left;}
#menu a{font: 1em 'times new roman';text-align:center;text-decoration:none;width:120px;display:block;outline:none;}
#menu a:link, #menu a:visited{color:#fff;background:#00f;border:#009 solid 1px;}
#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;}
#menu ul li:hover ul{display:block;}
#menu li ul li{clear:left;}
#menu li ul a:link, #menu li ul a:visited{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>
</head>
<body>
<center>
<table border=1>
<td><center><img src="imagenes/logo.jpg"></center></td>
<tr>
<td>
<div id="menu">
<ul>
<li><a href="#">Ingenierias</a>
 <ul>
 <li><a href="#">Administracion</a></li>
 <li><a href="#">Sistemas Computacionales</a></li>
 <li><a href="#">Industrial</a></li>
 <li><a href="#">Quimica</a></li>
 <li><a href="#">Bioquimica</a></li>
 </ul>
</li>
<li><a href="#">Tutores</a>
 <ul>
 <li><a href="#">2.Uno</a></li>
 <li><a href="#">2.Dos</a></li>
 </ul>
</li>
<li><a href="#">Tutorados</a>
 <ul>
 <li><a href="#">3.Uno</a></li>
 <li><a href="#">3.Dos</a></li>
 <li><a href="#">3.Tres</a></li>
 <li><a href="#">3.Cuatro</a></li>
 <li><a href="#">3.Cinco</a></li>
 </ul>
</li>
<li><a href="#">Portal de Tutorias</a>
 <ul>
 <li><a href="#">4.Uno</a></li>
 <li><a href="#">4.Dos</a></li>
 <li><a href="#">4.Tres</a></li>
 </ul>
</li>
</ul>
</div>
</td>
</table>
</center>
  #2 (permalink)  
Antiguo 14/07/2008, 03:16
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 11 años, 6 meses
Puntos: 36
Respuesta: ayuda menu horizontal

Cambia tu CSS por este:
Código:
/* menú */
#menu ul{list-style:none;margin:0;padding:0;}
#menu li{float:left;}
#menu a{font: 1em 'times new roman';text-align:center;text-decoration:none;width:120px;display:block;outline:none;}
#menu a:link, #menu a:visited{color:#fff;background:#00f;border:#009 solid 1px;}
#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;}
#menu ul>li:hover>ul{display:block;}
#menu li>ul>li{clear:left;}
#menu li>ul>a:link, #menu>li>ul>a:visited{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;}

/* segundo submenú desplegable */
#menu ul li ul li ul{display: none; position:absolute; left: 12px; margin-top: -20px;}
#menu ul li ul li:hover ul{display:block;}
#menu li ul li ul a:link, #menu li ul li ul a:visited{color:#fff;background:#99f;border:#00f solid 1px;}
#menu li ul li ul a:hover{color:#000;background:#9f9;border:#0f0 solid 1px;}
#menu li ul li ul a:focus, #menu li ul li ul a:active{color:#000;background:#f99;border:#f00 solid 1px;}
Y luego mete ul dentro de las listas tal y como hacías antes:
Código HTML:
<div id="menu">
<ul>
<li><a href="#">Ingenierias</a>
 <ul>
 <li><a href="#">Administracion</a></li>
 <li><a href="#">Sistemas Computacionales</a>
  <ul>
  <li><a href="#">Submenú</a></li>
  </ul>
 </li>
 <li><a href="#">Industrial</a></li>
 <li><a href="#">Quimica</a></li>
 <li><a href="#">Bioquimica</a></li>
 </ul>
</li> 
  #3 (permalink)  
Antiguo 14/07/2008, 03:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 12 años
Puntos: 279
Respuesta: ayuda menu horizontal

Cita:
Iniciado por Alphabravo Ver Mensaje
Hola tengo un menu horizontal y quiero sacarle al submenu otro menu pero no sale como puedo hacerlo?
Seguro que hablas de internet explorer, ¿verdad?

Raulmmmm: la modificaciópn que propones con los "hijo de hijo de" (#menu ul>li>ul), no tiene ninguna utilidad, porque su menú ya funcionaba perfectamente en firefox, igual que el tuyo, pero ninguno de los dos funcionará en IE6.

Alphabravo: échate un vistazo a este menú de las FAQ, que funcona tanto en IE como FF y mira por qué.

http://www.forosdelweb.com/f53/faqs-...ml#post2443905

Mikel.
  #4 (permalink)  
Antiguo 14/07/2008, 06:32
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 11 años, 6 meses
Puntos: 36
Respuesta: ayuda menu horizontal

Es verdad, me olvidé de IE6. Últimamente estoy más por Mandriva que por XP, y cuando estoy en Mandriva no me apetece reiniciar para verlo en IE. Tendré que instalarme el XP en una máquina virtual.
  #5 (permalink)  
Antiguo 14/07/2008, 06:57
 
Fecha de Ingreso: agosto-2006
Mensajes: 191
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: ayuda menu horizontal

Hola Raulmmmm, se que no es el foro adecuado, pero hechale un vistazo a esta web.

Es bastante util...

Salu2
__________________
El mejor consejo lo da la experiencia, aunque este siempre llega tarde.
Cacharreando con Joomla
  #6 (permalink)  
Antiguo 14/07/2008, 07:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 12 años
Puntos: 279
Respuesta: ayuda menu horizontal

Si te decides por una máquina virtual, yo te recomiendo VirtualBox. A mi me va de maravilla.

Mikel.
  #7 (permalink)  
Antiguo 14/07/2008, 11:04
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 11 años, 6 meses
Puntos: 36
Respuesta: ayuda menu horizontal

Trutxof: ¡Muchas gracias! Yo pensaba que no se podía instalar IE en Linux, acabo de empezar en Linux y no conocía esa web.

Mikmoro: Gracias a ti también, pero ya conocía ese programa (desde que era de Innotek) y lo usaba para virtualizar Linux en Windows, y ahora lo usaré al revés.
  #8 (permalink)  
Antiguo 14/07/2008, 12:23
 
Fecha de Ingreso: enero-2005
Mensajes: 386
Antigüedad: 13 años, 9 meses
Puntos: 3
Respuesta: ayuda menu horizontal

Gracias :D este menu no funciona para IE vdd ? o se puede modificar para que si funcione?
  #9 (permalink)  
Antiguo 14/07/2008, 12:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 12 años
Puntos: 279
Respuesta: ayuda menu horizontal

¿Has leido mi mensaje? ¿has seguido el vínculo?

Si no apañas de esa manera, tambien puedes usar un javascript que arregla muchos de esos comportamientos erróneos.

http://vagabundia.blogspot.com/2008/...oblemas-3.html

Mikel.

Última edición por Mikmoro; 14/07/2008 a las 12:37
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:47.