DropDown Hover

HTML

<!--http://aios2-staging.agentimage.com/e/excelrealtyandmortgage.com/htdocs/-->
<div id="ctahome">
    <div class="ctacontent"><div class="allme">
    <div class="cta"><a href="">search for homes</a></div>
    <div class="ctatext">
        <input type="text">
   	Find your dream home.<br />
	Find information on the schools.<br />
	What's on the market in your area?
    </div>
    </div></div>
</div>

CSS

#ctahome {width:100%; margin-top:250px; position:relative; clear:both;}
.cta{width:340px; height:40px; background:#ccc;
text-transform:uppercase; text-align:center; padding-top:20px; font-size:20px; line-height:22px;
position:relative; z-index:9;}
.cta a {display:block; color:#fff;}
.ctapad {margin:0 22px;}
.ctacontent {width:340px; float:left; position:relative;}
.ctatext {width:100%; height:200px; position:absolute; margin-bottom:0; text-align:center; line-height:15px;
background:#ddd; display:none; padding:20px 30px 0 30px; font-size:12px;}
.ctatext img{max-width:100%; height:auto; margin-bottom:5px; line-height:20px;}
.allme {position:relative;}

.hcontext{text-align: justify; -moz-text-align-last: center; padding:0 10px;
text-align-last: center; line-height:25px; font-size:12px; font-weight:300;}
.hcontext:after {content: ""; display: inline-block; width: 100%;}

.hcontext h1 {font-size:22px; letter-spacing:1px; text-transform:uppercase; padding-bottom:20px; 
font-weight:300;}

JavaScript

jQuery(function () {
	$('.allme')
    .mouseenter(function() {
		jQuery(this).css("zIndex","999999");
	   var index = $(this).parent().index(),
		newTarget = jQuery('.ctatext').eq(index);
		jQuery('.ctatext').not(newTarget).toggle('fast')
        newTarget.delay('.ctatext').fadeIn('fast')	
    })
    .mouseleave(function() {
		jQuery(this).css("zIndex","9");
        jQuery('.ctatext').fadeOut('fast');	
    });
});