Close hover div only when clicked outside block

Question

I have got a loginbox (blue) that opens when you hover over the text login (Yellow). The box stays open when you go to the loginbox but it closes when you leave it (Mouse in the green area).

This is expected behaviour with my current css (using hover and display:none / block)

I would like the loginbox (blue) to stay open even when you enter the green area. But when you click in the green area the loginbox (blue) closes (display: none)

I guess this is only possible with javascript/jQuery but I have no idea how. Can anyone help me with this?

Don't worry about div id's and classes. I will change the code to my needs.

Answer 1

Try this http://jsfiddle.net/steelywing/gnyyB/

$('#main').mouseenter(function () {
    $('#menu').show();
});

// To prevent hide #menu when click on #main
$('#main').click(function (e) {
    e.stopPropagation();
});

// Click outsite of #menu
$('html').click(function () {
    $('#menu').hide();
});

Answer 2

you can use

   function example(){  

   var divId = document.getElementById("divId");

   divId.style.display = "block";

  }

Here divId is the blue color divId and call this function in onhover for green div.