Comunidad de diseño web y desarrollo en internet online

menu css hover

Citar            
MensajeEscrito el 07 Mar 2014 11:13 pm
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 :

@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 HTML :

<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

Por kakashi20

43 de clabLevel



 

chrome
Citar            
MensajeEscrito el 08 Mar 2014 08:39 pm
Un ejemplo sencillo:
http://jsfiddle.net/aSWy7/

analízalo

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 02 Abr 2014 08:10 pm
gracias

Por kakashi20

43 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.