elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  menu css hover		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: menu css hover  (Leído 2,410 veces)
kakashi20


Desconectado Desconectado

Mensajes: 435


Ver Perfil
menu css hover
« en: 8 Marzo 2014, 00:11 am »
hola

estoy haciendo un menu desplegable, pero cuando hago el hover en la opcion donde el id=op1, no funciona el hover para que me aparezca el submenu2

Código
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. @import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);
  5.  
  6.  
  7. ul {z-index:100}
  8.  
  9. #menu {
  10.  
  11. 	text-align: center;
  12.  
  13.  
  14. 	max-width: 1100px;
  15. 	margin: 0px auto;
  16. 	height:65px;
  17. 	font: bold 14px Oswald;
  18. 	color: #fff;
  19.  
  20. 	border: 5px solid rgba(129,113,107,0.15);
  21.  
  22.  
  23. 	box-shadow: 0 6px 20px #877368; 
  24.  
  25.  
  26. }
  27.  
  28. #menu .op_menu1 {
  29.  
  30. 	float:left;
  31. 	border:0px solid #F00;
  32. 	height:65px;
  33. 	width:157.1px;
  34. 	float:left;
  35. 	background: url(../img/nav_bg.png) repeat-x top;
  36.  
  37.  
  38. }
  39.  
  40. #menu #text_op_menu1{
  41.  
  42. 	line-height:65px;	
  43.  
  44.  
  45. }
  46.  
  47. #menu .op_menu1:hover{
  48.  
  49. 	background:#91aa13;	
  50.  
  51.  
  52. }
  53.  
  54. #op1:hover #submenu2{
  55.  
  56. 	display:block;
  57.  
  58.  
  59. }
  60.  
  61.  
  62.  
  63. #submenu2{
  64.  
  65. 	width:157.1px;
  66. 	height:auto;
  67. 	position:absolute;
  68. 	border:0px solid #f00;
  69. 	margin-left:155px;
  70. 	margin-top:65px;	
  71. 	padding-top:10px;
  72. 	padding-bottom:10px;
  73. 	background:#FFF;
  74. 	display:none;
  75.  
  76.  
  77. }
  78.  
  79. #submenu3{
  80.  
  81. 	width:157.1px;
  82. 	height:auto;
  83. 	position:absolute;
  84. 	border:0px solid #f00;
  85. 	margin-left:314px;
  86. 	margin-top:65px;	
  87. 	padding-top:10px;
  88. 	padding-bottom:10px;
  89. 	background:#FFF;
  90. 	display:none;
  91.  
  92.  
  93. }
  94.  
  95. #submenu2 ul, #submenu3 ul{
  96.  
  97.  
  98. 	list-style-type: none;
  99.  
  100.  
  101. }
  102.  
  103. #submenu2 ul li, #submenu3 ul li{
  104.  
  105. 	width:157.1px;
  106. 	text-align:center;
  107. 	border:0px solid #f00;
  108. 	color:#333;
  109. 	margin-left:-40px;
  110. 	height:30px;
  111. 	line-height:30px;
  112.  
  113.  
  114. }
  115.  
  116.  
  117. #submenu2 ul li:hover, #submenu3 ul li:hover{
  118.  
  119. 	background:#91aa13;	
  120. 	color:#fff;
  121.  
  122.  
  123. }


Código
  1. <div id="menu">
  2.  
  3.  
  4.  
  5.     	<div class="op_menu1"><div id="text_op_menu1">OPCION0</div></div>
  6.  
  7.         <div class="op_menu1" id="op1"><div id="text_op_menu1">OPCION1</div></div>
  8.  
  9.         <div class="op_menu1"><div id="text_op_menu1">OPCION2</div></div>
  10.  
  11.         <div class="op_menu1"><div id="text_op_menu1">OPCION3</div></div>
  12.  
  13.         <div class="op_menu1"><div id="text_op_menu1">OPCION4</div></div>
  14.  
  15.         <div class="op_menu1"><div id="text_op_menu1">OPCION5</div></div>
  16.  
  17.         <div class="op_menu1"><div id="text_op_menu1">OPCION6</div></div>
  18.  
  19.         <div id="submenu2">
  20.  
  21. 			<ul>
  22.  
  23.             	<li>MISION</li>
  24.                 <li>VISION</li>
  25.                 <li>POLITICA CALIDAD</li>
  26.                 <li>POLITICA AMBIENTAL</li>
  27.  
  28.             </ul>
  29.  
  30.  
  31. 		</div>
  32.  
  33.         <div id="submenu3">
  34.  
  35. 			<ul>
  36.  
  37.             	<li>opcion1</li>
  38.                 <li>opcion2</li>
  39.  
  40.  
  41.             </ul>
  42.  
  43.  
  44. 		</div>
  45.  
  46.  
  47.  
  48.  
  49. </div>


si alguien me pudiese ayudar se lo agradeceria
En línea
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: menu css hover
« Respuesta #1 en: 8 Marzo 2014, 01:31 am »
Con esto puedes seguir..

Código
  1. #menu #op1:hover ~ #submenu2{
  2.       display:block;
  3.  
  4. }
  5.  
  6. #submenu2:hover{
  7.       display:block;
  8. }
En línea
GITHUB 
kakashi20


Desconectado Desconectado

Mensajes: 435


Ver Perfil
Re: menu css hover
« Respuesta #2 en: 8 Marzo 2014, 03:38 am »
EFEX gracias de nuevo..

me ha servido mucho
En línea
Happiness

Desconectado Desconectado

Mensajes: 7



Ver Perfil
Re: menu css hover
« Respuesta #3 en: 8 Marzo 2014, 21:53 pm »
- Disculpen si me desvio del tema y por mi ignorancia pero sera que alguno de uds me puede explicar que funcion tiene el simbolo que EFEX acaba de utilizar ? osea el " ~ ", soy algo novata en esto del css e estado estudiando por un tiempillo el css pero nunca habia visto que alguien utilizara ese simbolo antes y estuve investigando sobre ese simbolo para no fastidiar por aqui pero no obtuve ningun resultado tal vez es porque no supe como buscar alguna referencia sobre ello ya que no se que palabras clave utilizar en Google...

- Y me da mucha curiosidad su funcion en que afecto a los selectores ya que solo conozco selectores del tipo ID, Por clases, Adyacentes, Por agrupacion que son los que se separan por Comas " , " y hmmmmmm el de atributo que son los que se usan con corchetes " [nombre_atributo] " aunque este jamas lo e llegado a utilizar, aaah si tambien las pseudo clases y elemento no todos me los se solo algunos pero si se que lo que uso EFEX no es algo de esos.

- Quien me explica xd ?
En línea
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: menu css hover
« Respuesta #4 en: 9 Marzo 2014, 21:02 pm »
Happiness, se le llama selectores en css, es como utilizar expresiones regulares para definir cambios solo a los elementos que definamos, en este caso queria definirlo de esta forma(se le conoce como selector descendente)..

Código
  1. #menu #op1:hover #submenu2{
  2.      display:block;
  3. }

Pero no funcionaria por que #submenu2 no es un elemento hijo de #op1(html), estan a la par por decirlo.. entonces se utiliza ~ para definir que el elemento #submenu2 es precedido por el elemento #op1 aun que este(#submenu2) no sea un elemento hijo de #op1.

Para leer  ::)
http://reference.sitepoint.com/css/descendantselector
http://librosweb.es/css_avanzado/capitulo_3.html
http://www.w3.org/TR/css3-selectors/#general-sibling-combinators
« Última modificación: 9 Marzo 2014, 21:04 pm por EFEX » En línea
GITHUB 
Happiness

Desconectado Desconectado

Mensajes: 7



Ver Perfil
Re: menu css hover
« Respuesta #5 en: 9 Marzo 2014, 21:53 pm »
- Hmmm entiendo, en resumidas esa pestañita " ~ " volvio Hijo a #submenu2 de #op1... Entonces en teoria si yo hago esto deberia funcionar tambien Ojo codigo sin probar.

Código:

<div id="menu">
          <div class="op_menu1"><div id="text_op_menu1">OPCION0</div></div>
     
           <div class="op_menu1" id="op1">

<div id="submenu2">
     
    <ul>
     
                <li>MISION</li>
                   <li>VISION</li>
                   <li>POLITICA CALIDAD</li>
                   <li>POLITICA AMBIENTAL</li>
     
               </ul>
      
    </div>

<div id="text_op_menu1">OPCION1</div></div>
     
           <div class="op_menu1"><div id="text_op_menu1">OPCION2</div></div>
     
           <div class="op_menu1"><div id="text_op_menu1">OPCION3</div></div>
     
           <div class="op_menu1"><div id="text_op_menu1">OPCION4</div></div>
     
           <div class="op_menu1"><div id="text_op_menu1">OPCION5</div></div>
     
           <div class="op_menu1"><div id="text_op_menu1">OPCION6</div></div>
           
     
           <div id="submenu3">
     
    <ul>
     
                <li>opcion1</li>
                   <li>opcion2</li>
     
     
               </ul>   
    </div>
</div>


 Y el css de el quedaria como lo tenia desde un principio osea esta parte así.

Código:

#op1:hover #submenu2{
 
display:block;
 
 
}
 

- Solo movi el div id="submenu2" de lugar.
En línea
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: menu css hover
« Respuesta #6 en: 9 Marzo 2014, 23:28 pm »
Si entendiste.

http://jsfiddle.net/7rKHh/
En línea
GITHUB 
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Microsoft adapta para navegadores, Hover, un juego de Windows 95
Noticias 		wolfbcn 0 1,379 Último mensaje 2 Octubre 2013, 21:49 pm
por wolfbcn
error hover jquery
Desarrollo Web 		kakashi20 3 1,968 Último mensaje 8 Marzo 2014, 01:14 am
por EFEX
Hover de elemento hijo
Desarrollo Web 		kakashi20 2 1,727 Último mensaje 9 Enero 2016, 03:11 am
por xiruko
Imagenes con hover dentro de Div horizontal
Desarrollo Web 		hegispok 0 1,593 Último mensaje 31 Enero 2016, 14:08 pm
por hegispok
css after hover
Desarrollo Web 		dpr 1 1,501 Último mensaje 17 Abril 2019, 22:58 pm
por iCoke
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines