hover menu desplegable

[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:

@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

[heinzy]

hola

La verdad es que se puede simplificar mucho lo que has hecho.

pero llendo al grano la forma mas facil de hacer un menu desplegable con css es anidando listas...

te paso un ejemplo de como lo podrias hacer:

Código HTML:

<div id="menu">
     
       
       <ul>
            <li><div class="op_menu1"><div id="text_op_menu1">OPCION0</div></div></li>
           
            <li><div class="op_menu1" id="op1"><div id="text_op_menu1">OPCION1</div></div></li>
           
            <li><div class="op_menu1"><div id="text_op_menu1">OPCION2</div></div>
            
            
                 <ul>
               
                    <li>MISION</li>
                    <li>VISION</li>
                    <li>POLITICA CALIDAD</li>
                    <li>POLITICA AMBIENTAL</li>
               
                </ul>
                
             </li>
           
            <li><div class="op_menu1"><div id="text_op_menu1">OPCION3</div></div></li>
           
            <li><div class="op_menu1"><div id="text_op_menu1">OPCION4</div></div></li>
           
           <li> <div class="op_menu1"><div id="text_op_menu1">OPCION5</div></div></li>
           
           <li> <div class="op_menu1"><div id="text_op_menu1">OPCION6</div></div></li>
           
           
        </ul>
 

y el css:

Código CSS:

#menu ul li ul {
 
 
    position: absolute;
    width: 10em;
    left: -800em;
    float: none;
    border_bottom:none;
    
    }
    
#menu ul li:hover ul {
 
    left: 30em;
    top: 80px;
    
    }
 

espero te alla servido.. saludos