persistencia para que no se cierre menu desplegable al seleccionar un input text

[XtremeBook]

hola amigos tengo un menu desplegable que se despliega al hacer click y se mantiene abierto hasta clickear fuera de el. el problema es que cuando introduzco un input text dentro de ese menu desplegable al intentar seleccionar el input para escribir algo dentro de el se me cierra y no tengo idea de por que!

aqui un poco de codigo CSS

Código CSS:

body{
  margin:0;
  padding:<length> 0 0 0;
  background:#F0F0F0;
 }
 
 @media screen{
  body>div#top-bar-bg{
   position: fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#contentfoot{
  height:100%;
  overflow:auto;
  }
#top-bar-bg{
        position: absolute;
        display:inline-block;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        background-color:#96CE42;
        height: 40px;
        width: 100%;
        box-shadow: 2px 2px 5px #999;
        z-index:50;
        
            
}
 
 
 
#top-bar-menu{
        position: relative;
        margin: 0 auto 0 auto;
        width: 1000px;
        height: 40px;
                    
}
 
 
#down-arrow{
        position: relative;
        float:right;
        margin-top: 8px;
        margin-right:-10px;
        width:7px;
        height:4px;
        background-image:url(../../images/top-bar/down-arrow.gif);
        
        
 
}
 
#menu-wrapper ul{
        padding:0;
        list-style:none;    
        margin-top:0px;
        float:right;
        overflow:auto;
        margin-right:10px;
        
        
        
}
 
#hmenu > li{
        display:inline-block;
        font-family:Myriad pro,Verdana, Geneva, sans-serif;
        text-align:center;
        height:40px;    
        padding-left:5px;
        padding-right:5px;
        cursor:pointer;
        overflow:auto;
        
        
        
        
        
        
 
}
 
#hmenu > li:hover{
        background-color:#AAEA71;   
        
    }
    
#hmenu > li:active{
        background-color:#AAEA71;   
    
    }
    
    #hmenu > li:focus{
        background-color:#AAEA71;   
    
    }
 
 
#hmenu > li > a{
        display:block;  
        padding: 10px 5px;
        padding-left:5px;
        padding-right:5px;
        width: auto;
        text-decoration:none;
        color:#FFF;
        font-size:15px;
        
 
        
}
 
li ul{
        position:absolute;
        display:none;   
            
            
}
 
.sub-menu a{
        display:block;
        visibility:visible;
        padding:9px 5px;
        width:130px;
        color:#FFF;
        text-decoration:none;
        text-align:left;
        padding-left:10px;
        font-size:15px;
        margin-right:0px;           
}
 
#sub-menu{
        border-radius:5px;
        background-color:#E9E9E9;
        border:2px solid #999;
        height:20px;
}
 
#sub-menu:hover{
        background-color:#FFF;
        
}
 
#sub-menu:focus{
        border-radius:5px;
        border:2px solid #F90;
        background-color:#FFF;
        
}
 
.sub-menu{
 
        margin-left:-5px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px; /* Firefox*/
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;    
        z-index:100;    
        
        
            
}
.sub-menu a:hover{
    
        background-color:#96CE42;       
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        z-index:100;
        
}
 
 
 
 
#menu-wrapper li ul{
        background-color:#AAEA71;
        padding-left: 10px;
        padding-right: 10px;
        
        
        
        
                        
}
 
#menu-wrapper ul li:focus ul, #menu-wrapper ul li:active ul  {
        background-color:#AAEA71;
        display: block;
        
                        
}
 

asi es el menu en HTML en donde vean el input text es ahi el lugar donde es el problema son dos inputs los unicos y el boton de envio

Código HTML:

<div id="top-bar-bg">
 <div id="contentfoot">
 <div id="top-bar-menu"> 
 
    
    <div id="menu-wrapper-log">
 
        <ul id="hmenu-log">
          <li>
            <a href="#">&nbsp;<div id="down-arrow-log"></div>
          
    </a>
   <ul class="sub-menu-log">
            
                    <li><a href="index.php">Inicio</a></li>
                     <li><a href="acercade.php">Acerca de</a></li>
                    <li><a target="_blank" href="http://twitter.com/sprogramadores">Twitter</a></li>
                    <li><a target="_blank" href="http://www.facebook.com/somosprogramadores">Facebook</a></li>
                    <li><a target="_blank" href="http://www.youtube.com/somosprogramadores">Youtube</a></li>
                    
                    </ul>
                </li>
                </ul>
                </div>
        
    <div id="menu-wrapper">
 
        <ul id="hmenu">
 
          <li tabindex="1"><a>Inicia&nbsp;Sesión<div id="down-arrow"></div>
          </a>
          
                <ul class="sub-menu">
                <br />
            <input id="sub-menu" type="text" name="username" /><br /><br />
            <input id="sub-menu" type="password" name="username" /><br /><br />
            
            <input type="submit" value="Ingresar" />
                    
                    </ul>
                </li>
        
          <li tabindex="2"><a>¡Regístrate!<div id="down-arrow">
             </div>
          </a>
             
             
                <ul class="sub-menu">
            
                    <li><a href="#">prueba!</a></li>
                    <li><a href="#">probandito</a></li>
                    
                    </ul>
                </li>
                
                
                <li><a>Videotutoriales</a></li>
        
                <li><a>Artículos</a></li>
        
                <li><a>Noticias</a></li>
        
                <li><a>Inicio</a></li>
</ul>
</div>
</div></div></div>
</div>
 

[ArturoGallegos]

tu problema es que muestras el menú durante el foco y cuando seleccionas el input evidentemente el elemento anterior pierde el foco


tu solución es complementarlo con el evento hover

Código CSS:

#menu-wrapper ul li ul:hover,#menu-wrapper ul li:focus ul, #menu-wrapper ul li:active ul  {
        background-color:#AAEA71;
        display: block;                     
}
 

[XtremeBook]

entiendo amigo gracias funciona bien puedo seleccionar el input text y se queda abierto.

el problema que veo es que si despues de seleccionar el input quito el mouse de encima se cierra el sub-menu,

¿Como hago para que se quede abierto aún sin estar el mouse encima del submenu?

[ArturoGallegos]

mmmm para ese escenario no se me ocurre nada con CSS, yo recurriría a jquery

[XtremeBook]

o alguna forma para darle delay para que no se cierre al instante del quitar el hover si no en tantos segundos!

De todos modos gracias por la ayuda me sirvio de mucho amigo!

[ArturoGallegos]

podrías utilizar transition del CSS3 pero habría que considerar la incompatibilidad con IE, reitero el utilizar jquery seria mi solución, o esperar que algún otro usuario responda esperando conozca alguna otra alternativa que no sea jquery o CSS3

si te interesa hacerlo con transition de CSS3 seria mas o menos así:

Código CSS:

#menu-wrapper ul li ul{
display:none;
-webkit-transition: all 0.3s ease;/*navegadores webkit*/
-moz-transition: all 0.3s ease;/*firefox*/
-o-transition: all 0.3s ease;/*opera*/
transition: all 0.3s ease;/*Navegadores que soporten transition CSS3*/
}
#menu-wrapper ul li ul:hover,#menu-wrapper ul li:focus ul, #menu-wrapper ul li:active ul  {
background-color:#AAEA71;
display: block;                    
}
 

[kseso?]

Como curiosidad ahí va lo siguiente:
Opciones persistentes sólo con css. Nada de javascript, y mucho menos librerías.

Código HTML:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kseso? jugando con css</title>
<style type="text/css">
.tabs {
  position: relative;
  min-height: 200px;
  width: 400px;
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}
.tab [type=radio] {
  display: none;
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
  overflow: hidden;
  opacity: 0;
  -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
}
.content > * {
  position: relative;
  top: 400px;
  left: 0;
  -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;  
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  top: 28px;
  left: 0;
  opacity: 1;
  -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
}
[type=radio]:checked ~ label ~ .content > * {
  top: 0;
  left: 0;
  opacity: 1;
  -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
  
}
</style>    
</head>
<body>
<div class="tabs">
 
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Opción 1</label>
 
       <div class="content">
           <ul>
                <li><a href="#">El Blog</a></li>
                <li><a href="blog/stats.php">Estadísticas</a></li>
                <li><a href="#">Artículos</a></li>
            </ul>
       </div>
   </div>
 
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">2 Opción</label>
 
       <div class="content">
           <ul>
                <li><a href="#">Contactar</a></li>
                <li><a href="#">El Autor</a></li>
                <li><a href="#">Términos de Uso</a></li>
            </ul>
       </div>
   </div>
 
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tercera Op.</label>
 
       <div class="content">
           <ul>
                <li><a href="#">En Twitter</a></li>
                <li><a href="#">Gacetilla CSS</a></li>
            </ul>
       </div>
   </div>
 
    <div class="tab">
       <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4">Más Opciones</label>
 
       <div class="content">
           <p>Cualquier tipo de contenidos. No sólamente listas.</p>
           <p>Funcional en Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+, and IE 9+</p>
           <p>Créditos: en base a idea original de Chris Coyier en css-tricks.com</p>
       </div>
   </div>
 
</div>
</body>
</html>
 

Nota: los efectos sobre opacity y position sólo verificados en chrome y ff