menu de despliegue

[xlos_mas_pro]

Hola tengo un menu de despligue con css y html
dejo solo el html ya que el css es igual que todos

Código HTML:

<div class="menu">
            <ul>
                <li><a href="#">Principal</a>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                    </ul>
                </li>
                <li><a href="#">segundo</a>
                    <ul>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
 

Pero Bueno voy al grano lo que quiero es que cuando se abra el menu desplegable osea cuando pase el mause por ensima y luego lo quiera sacar para que se cierre no se cierre sino que tenga que hacer clik fuera del menu para que se cierre

GRACIAS DE ANTEMANO

[IsaBelM]

puedes continuar con css. uaa la pseudo clase :focus

[xlos_mas_pro]

Iniciado por IsaBelM

puedes continuar con css. uaa la pseudo clase :focus

como haria eso ??

[IsaBelM]

igual que si usaras :hover

[xlos_mas_pro]

si lo intente pero no funciona que tengo que hacer replazar el hover que usaba por el focus ?? me lo podrias mostrar hay con el codigo que deje porfavor

[xlos_mas_pro]

aqui esta el css del mismo

Código CSS:

.menu{
            background:#262626;
            width:100%;
            height:50px;
            overflow:hidden;
         }
         .menu ul{
            margin:10px 0 0 10px;
            list-style:none;
            padding:0;
         }
        .menu a{
            display:block;
            width:150px;
            height:20px;
            color:#FFF;
            text-align:center;
            text-decoration:none;
        }
        .menu a:hover{
            background:#F3EB43;
        }
        .menu li li a:hover{
            background:#97ED49;
            color:#000;
        }
        .menu li{
            border-radius:2px;
            border:1px solid #999;
            background:#CCC;
            padding:7px;
            float:left;
        }
        .menu li ul{
            display:none;
            position:absolute;
        }
        .menu li:hover ul{
            display:block;
        }
        .menu li li{
          border-radius:0;
          position:relative;
          left:-17px;
          top:-3px;
          padding:5px;
          float:none;
          display:block;
        }
 

[IsaBelM]

sin probarlo, puede que sea así

.menu > ul > li a:focus + ul