Tema: hover menu desplegable
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/03/2014, 17:06
Avatar de kakashi20
kakashi20
 
Fecha de Ingreso: septiembre-2009
Mensajes: 616
Antigüedad: 15 años, 2 meses
Puntos: 15
Exclamación hover menu desplegable
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: 
Ver original
  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 HTML: 
Ver original
  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