menu css hover

[kakashi20]

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 (css) [Seleccionar] Expandir

@charset "utf-8";
/* CSS Document */

@import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);


ul {z-index:100}

#menu {

text-align: center;


max-width: 1100px;
margin: 0px auto;
height:65px;
font: bold 14px Oswald;
color: #fff;

border: 5px solid rgba(129,113,107,0.15);


box-shadow: 0 6px 20px #877368;


}

#menu .op_menu1 {

float:left;
border:0px solid #F00;
height:65px;
width:157.1px;
float:left;
background: url(../img/nav_bg.png) repeat-x top;


}

#menu #text_op_menu1{

line-height:65px;


}

#menu .op_menu1:hover{

background:#91aa13;


}

#op1:hover #submenu2{

display:block;


}



#submenu2{

width:157.1px;
height:auto;
position:absolute;
border:0px solid #f00;
margin-left:155px;
margin-top:65px;
padding-top:10px;
padding-bottom:10px;
background:#FFF;
display:none;


}

#submenu3{

width:157.1px;
height:auto;
position:absolute;
border:0px solid #f00;
margin-left:314px;
margin-top:65px;
padding-top:10px;
padding-bottom:10px;
background:#FFF;
display:none;


}

#submenu2 ul, #submenu3 ul{


list-style-type: none;


}

#submenu2 ul li, #submenu3 ul li{

width:157.1px;
text-align:center;
border:0px solid #f00;
color:#333;
margin-left:-40px;
height:30px;
line-height:30px;


}


#submenu2 ul li:hover, #submenu3 ul li:hover{

background:#91aa13;
color:#fff;


}

Código (html4strict) [Seleccionar] Expandir

<div id="menu">


   
    <div class="op_menu1"><div id="text_op_menu1">OPCION0</div></div>
       
        <div class="op_menu1" id="op1"><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="submenu2">

<ul>
           
            <li>MISION</li>
                <li>VISION</li>
                <li>POLITICA CALIDAD</li>
                <li>POLITICA AMBIENTAL</li>
           
            </ul>


</div>
       
        <div id="submenu3">

<ul>
           
            <li>opcion1</li>
                <li>opcion2</li>
               
           
            </ul>


</div>
       
     


</div>


si alguien me pudiese ayudar se lo agradeceria

[EFEX]

Con esto puedes seguir..

Código (css) [Seleccionar] Expandir


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

#submenu2:hover{
      display:block;
}

[kakashi20]

EFEX gracias de nuevo..

me ha servido mucho

[Happiness]

- 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 ?

[EFEX]

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 (css) [Seleccionar] Expandir


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

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

[Happiness]

- 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 [Seleccionar] Expandir



<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 [Seleccionar] Expandir



#op1:hover #submenu2{

display:block;


}



- Solo movi el div id="submenu2" de lugar.

[EFEX]

Si entendiste.

http://jsfiddle.net/7rKHh/