html5 - simple drop down box -

i have nav bar 4 links. 3 direct links , 1 should drop down 3 more links. struggling ul.services reappear when hovering on services link.

html

<a href="#" class="services">services</a> <ul id="drop_down"> <li><a href="#">profit</a></li> <li><a href="#">profit</a></li> <li><a href="#"">profit</a></li> </ul> <a href="#">about</a> <a href="#">contact</a> <a href="#">testimonials</a> 

css

#drop_down{ display: none; position: absolute; list-style-type: none; text-align: right; margin-left: 0; padding-left: 0; } a:hover{ color: red; } .services:hover > #drop_down{ display: block; } 

can help. thanks

the best way using jquery .hover() , fadein(), .fadeout() functions, first need know html code have lot of errors.

html corrected:

<a href="#" class="services">services</a> <ul id="drop_down">     <li><a href="#">profit</a></li>     <li><a href="#">profit</a></li>     <li><a href="#">profit</a></li> </ul> <a href="#">about</a> <a href="#">contact</a> <a href="#">testimonials</a> 

jquery code:

$("ul").css("display","none");  $(".services").hover(function(){     $("ul").fadein(); },function(){     $("ul").hover(function(){},function(){         $("ul").fadeout();     });     }); 

just take fiddle