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
