usar focus

[xlos_mas_pro]

hola voy directo al grano con mi problema xd Quiero saber como utilizar la propiedad focus para cerrar mi menu de despliegue haciendo clik fuera del menu que NO se cierre cuando el mause este afuera

Codigo HTML del menu:

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>
                <li><a href="#">Tercer</a>
                    <ul>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- menu -->
 

codigo css del menu:

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;
        }
 

Muchas gracias de antemano