Question

I have a code the function is drop-down. Dropdown can work smoothly.
Now I want when clicked the comment, box will show permanent and will close with outside click.

In this case, when I click the comment, box show and when I drag mouse to input comment, it closed.

So how can I keep the box ?

.dropdown {
position:relative;
}

.dropdown-menu {
position:absolute;
top:100%;
left:0;
z-index:1000;
display:none;
float:left;
min-width:300px;
list-style:none;
background-color:#fff;
border:1px solid rgba(0,0,0,0.2);
border-right-width:2px;
border-bottom-width:2px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
margin:1px 0 0;
padding:4px 0;

.navbar .dropdown-menu:after {
position:absolute;
top:-6px;
left:10px;
display:inline-block;
border-right:6px solid transparent;
border-bottom:6px solid #fff;
border-left:6px solid transparent;
content:'';

.open .dropdown-menu {
display:block;
}

<span class="navbar">
            <span class="dropdown">
                <a data-toggle="dropdown" class="comment" href="#">Comment</a>
                <ul class="dropdown-menu">
                    <li><input type="text"></li>
                </ul>
            </span>
            </span>

Answer 1

As per i understand may be that’s you want http://jsfiddle.net/H3Vnw/1/ . Write like this

$('.comment').click(function(){
    $('.dropdown-menu').css({'display': 'block'});
});

UPDATED

Write like this

var com = $('.comment');
var menu = $('.dropdown-menu');

        com.click(function() {
            menu.show(); return false;
        });

        $(document).click(function() {
            menu.hide();
        });

        menu.click(function(e) {
            e.stopPropagation();
        });

Check this http://jsfiddle.net/H3Vnw/4/