Foros del Web » Creando para Internet » CSS »

Menu css

 Estas en el tema de Menu css en el foro de CSS en Foros del Web. Estoy intentando modificar el menu 2 del siguiente link que me ha gustado, http://www.forosdelweb.com/f53/menu-...00-css-595007/ pero me surgen dos problemas. 1.- El primero, que quiero dejar ...
  #1 (permalink)  
Antiguo 23/03/2011, 03:29
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 11 meses
Puntos: 31
Menu css
Estoy intentando modificar el menu 2 del siguiente link que me ha gustado,
http://www.forosdelweb.com/f53/menu-...00-css-595007/
pero me surgen dos problemas.

1.- El primero, que quiero dejar fijo el submenu como muestro en la imagen, si esta en la opción 1, pues dejar el submenu 1 fijo, y si va cambiando a otras opciones mostrarlas con el hover.

2.-¿Porque me sale con la versión IE8 la barra de arriba lo de los controles scripts ó active si mi menu no utiliza nada de eso?

[IMG][/IMG]


Codigo HTML

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4.   <title>Menu desplegable CSS</title>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" href="css/menu2.css" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="menu">
  10. <ul>
  11.   <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
  12. <!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
  13.     <ul class="uno">
  14.         <li><a href="#">Opción 1.1</a></li>
  15.         <li><a href="#">Opción 1.2</a></li>
  16.     </ul>
  17. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  18.   </li>
  19.   <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
  20. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
  21.     <ul class="dos">
  22.         <li><a href="#">Opción 2.1</a></li>
  23.         <li><a href="http://www.google.es">Opción 2.2</a></li>
  24.         <li><a href="#">Opción 2.3</a></li>
  25.         <li><a href="#">Opción 2.4</a></li>
  26.         <li><a href="#">Opción 2.5</a></li>
  27.     </ul>
  28. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  29. </li>
  30.   <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
  31. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
  32.     <ul class="tres">
  33.         <li><a href="#"></a></li>
  34.         <li><a href="#">Opción 3.1</a></li>
  35.         <li><a href="#">Opción 3.2</a></li>
  36.         <li><a href="#">Opción 3.3</a></li>
  37.     </ul>
  38. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  39. </li>
  40.   <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
  41. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
  42.     <ul class="cuatro">
  43.         <li><a href="#"></a></li>
  44.         <li><a href="#">Opción 4.1</a></li>
  45.         <li><a href="#">Opción 4.2</a></li>
  46.         <li><a href="#">Opción 4.3</a></li>
  47.         <li><a href="#">Opción 4.4</a></li>
  48.     </ul>
  49. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  50. </li>
  51.   <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
  52. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
  53.     <ul class="cinco">
  54.         <li><a href="#"></a></li>
  55.         <li><a href="#"></a></li>
  56.         <li><a href="#">Opción 5.1</a></li>
  57.         <li><a href="#">Opción 5.2</a></li>
  58.         <li><a href="#">Opción 5.3</a></li>
  59.     </ul>
  60. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  61. </li>
  62. </ul>
  63. </div>
  64. </body>
  65. </html>

Código CSS

Código CSS: 
Ver original
  1. #menu ul li.nivel1 { float: left;
  2. width: 162px;
  3. margin-right: 2px;
  4. position: relative;
  5. }
  6. #menu ul li { float: left;}
  7.  
  8. #menu ul li a {display: block;
  9. text-decoration: none;
  10. color: #fff;
  11. background-color: #399;
  12. border: solid 1px #fff;
  13. padding: 8px;
  14. position: relative;
  15. }
  16. #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
  17. color: #000;
  18. position: relative;
  19. border-bottom: solid 1px #6CC;
  20. }
  21. #menu ul li a.nivel1 {display: block!important;display: none;
  22. }
  23. #menu ul li ul {display: none;
  24. }
  25. #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
  26. position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;
  27. }
  28. #menu ul li ul li a {width: 160px;
  29. padding: 6px 0px 8px 0px;
  30. border: none;
  31. background-color: #6CC;
  32. }
  33. #menu ul li ul li a:hover {
  34. position: relative;
  35. text-decoration: underline;
  36. border-bottom: none;
  37. }
  38. table.falsa {border-collapse:collapse;
  39. border:0px;
  40. float: left;
  41. position: relative;
  42. }
  43.  
  44. ul.uno {left: -0px;}
  45. ul.dos {left: -164px;}
  46. ul.tres {left: -328px;}
  47. ul.cuatro {left: -492px;}
  48. ul.cinco {left: -656px;}

gracias !
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo
  #2 (permalink)  
Antiguo 23/03/2011, 09:30
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 11 meses
Puntos: 31
Respuesta: Menu css
Nadie me puede ayudar? Lo del script esta solucionado, me queda que se quede fijo el menu de abajo
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo
  #3 (permalink)  
Antiguo 24/03/2011, 12:55
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Menu css
Este es el codigo HTML:

Código HTML:
<div id="menu">
<ul>
  <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
	<ul class="uno">
		<li><a href="#">Opción 1.1</a></li>
		<li><a href="#">Opción 1.2</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
	<ul class="dos">
		<li><a href="#">Opción 2.1</a></li>
		<li><a href="http://www.google.es">Opción 2.2</a></li>
		<li><a href="#">Opción 2.3</a></li>
		<li><a href="#">Opción 2.4</a></li>
		<li><a href="#">Opción 2.5</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
	<ul class="tres">
		<li><a href="#"></a></li>
		<li><a href="#">Opción 3.1</a></li>
		<li><a href="#">Opción 3.2</a></li>
		<li><a href="#">Opción 3.3</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
	<ul class="cuatro">
		<li><a href="#"></a></li>
		<li><a href="#">Opción 4.1</a></li>
		<li><a href="#">Opción 4.2</a></li>
		<li><a href="#">Opción 4.3</a></li>
		<li><a href="#">Opción 4.4</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul class="cinco">
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#">Opción 5.1</a></li>
		<li><a href="#">Opción 5.2</a></li>
		<li><a href="#">Opción 5.3</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
Es es el CSS:

Código: 
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
position: relative;
}
#menu ul { list-style-type: none;}

#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
position: relative;
}
#menu ul li { float: left;}

#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
border-bottom: solid 1px #6CC;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #6CC;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -0px;}
ul.dos {left: -164px;}
ul.tres {left: -328px;}
ul.cuatro {left: -492px;}
ul.cinco {left: -656px;}
  #4 (permalink)  
Antiguo 31/03/2011, 04:18
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 11 meses
Puntos: 31
Respuesta: Menu css
Pues no...
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo

Etiquetas: Ninguno
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


« Tema Anterior | Próximo Tema »


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