<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.top_menu a{
display:block;
}
.top_menu a>ul{
display:none;
}
.top_menu:hover a>ul{
display:block;
}
.top_menu a ul.active {
display:block!important;
}
.top_menu a {
display:block;
text-decoration:none;
}
.top_menu form {
color:#000;
}
</style>
<li class="top_menu" onclick="return false">
<a href="#" onclick="return false"><u>Search</u>
<ul>
<form ......><label> </label><input type="text"> <input type="submit" value="Искать!"></form>
</ul>
</a>
</li>
<script type="text/javascript">
$(".top_menu *").focus (function() {
$(".top_menu ul:first").addClass('active')
}).blur(function() {
$(".top_menu ul:first").removeClass('active')
});
</script>
Имхо вкуснее иная логика: Открывает - закрывает клик по "Search"
Закрывает так же клик вне формы
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.top_menu {
display:inline-block;
border:red solid 1px;
}
.top_menu >ul{
display:none;
}
.top_menu ul.active {
display:block!important;
}
</style>
</head>
<body style="min-height:200px;">
<li class="top_menu" onclick="return false">
<a class="aForm" href="#" onclick="return false">Search</a>
<ul>
<form ......><label> </label><input type="text"> <input type="submit" value="Искать!"></form>
</ul>
</li>
<script type="text/javascript">
$(".top_menu a:first").click(function() {
$(".top_menu ul:first").toggleClass('active');
});
$(".top_menu").click(function() {
return false;
});
$("body").click(function() {
$(".top_menu ul:first").removeClass("active");
});
</script>
</body>
</html>