Acción al hacer click fuera de una capa.

[Italico76]

Se logra con onClick seguido de OnMouseOver ..... y display:none / block o bien con visibility

Lo probe solo en CHROME ...

Código Javascript:

<style type="text/css">
 
 
.toolbar li {
    display:inline; /* los elementos comparten una linea horizontal */
    background-color:#eee;
    border:1px solid;
    border-color:#f3f3f3 #bbb #bbb #f3f3f3;
    margin:0;
    padding:.5em;
    zoom: 1;
}
 
#opt3_sub
{
        display:none;
        margin-left:180px;
        width: 200px;
        min-height: 100px;
        border: solid 1px #bbb;         
}
 
</style>
 
<ul class="toolbar">
 
<li><a href="#" id="opt1">Home</a></li>
<li><a href="#" id="opt2">About us</a></li>
<li><a href="#" id="opt3">Products</a></li>
<li><a href="#" id="opt4">FAQs</a></li>
<li><a href="#" id="opt5">Contact us</a></li>
</ul>
 
<div id="opt3_sub">Alguna cosa</div>
 
 
<script>
 
productos   = document.getElementById('opt3');  
opt3_sub    = document.getElementById('opt3_sub');
 
Handler1 = function()
{
    opt3_sub.style.display="block";
    console.log('Desplegando');
;};
 
Handler2 = function()
{
    opt3_sub.style.display="none";
    console.log('Ocultando');
;};
 
 
productos.addEventListener ('click',Handler1,false);
opt3_sub.addEventListener ('mouseout',Handler2,false);
 
 
</script>