Dropdown menu after :hover effect

Question

I would like to achieve the following effect in my dropdown menu, using only CSS and HTML?

Basically the idea is when move the mouse outside the dropdown menu, it keeps open till you click outside the menu or after X seconds. Is it possible to achieve this without any extra libraries or technologies (besides CSS and HTML)?

Answer 1

UPDATE: Now that the question is clarified, it would seem the behavior that you are seeking is not possible without using JavaScript. I did find an example of a pure CSS clickable dropdown, but it does not meet all of your criteria.

--- Original answer before question was clarified ---
You've actually asked two questions here. You originally did not specify a preferred technology to accomplish this, so I found answers to each using jQuery. (These answers use .show() and .hide() to show/hide the element - but you could also use .css() to directly change the CSS yourself, if you prefer.)

Dropdown keeps open until click outside the menu
You can detect a click on the document and then check for immediate ancestry to see if the desired element was clicked. (Partial credit: https://stackoverflow.com/a/3028037/561309)

$(document).click(function(event) { 
    if($(event.target).closest('#menucontainer').length) {
        if($('#menucontainer').is(":hidden")) {
            $('#menucontainer').show();
        }
    }

    if(!$(event.target).closest('#menucontainer').length) {
        if(!$('#menucontainer').is(":hidden")) {
            $('#menucontainer').hide();
        }
    }        
})

Dropdown keeps open until certain time has passed
You can use the setTimeout function to have the CSS change after a certain period of time - example here is two seconds. The .stop method should keep the timeout from executing once the mouse moves back over the menu, but this should be tested. (Partial Credit: https://stackoverflow.com/a/14247096/5365001)

$(document).ready(function(){
    $("#menucontainer").click(function(){
        $("#menucontainer").toggle());
    });

    $("#menucontainer").mouseout(function(){
        setTimeout(function(){ $("#menucontainer").hide(); },2000);
    });

    $("#menucontainer").mouseover(function(){
        $("#menucontainer").stop(); });
    });
});

And, if you wanted to combine both, this should do the trick:

$(document).ready(function(){
    $(document).click(function(event) { 
        if($(event.target).closest('#menucontainer').length) {
            if($('#menucontainer').is(":hidden")) {
                $('#menucontainer').show();
            }
        }

        if(!$(event.target).closest('#menucontainer').length) {
            if(!$('#menucontainer').is(":hidden")) {
                $('#menucontainer').hide();
            }
        }        
    })

    $("#menucontainer").mouseout(function(){
        setTimeout(function(){ $("#menucontainer").hide(); },2000);
    });

    $("#menucontainer").mouseover(function(){
        $("#menucontainer").stop(); });
    });
});