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>