Hiding div tag with ul tag when mouse hover for menu

[andrewliu]

Hello

I have a menu and when you hover theres a drop down.

I also have a div tag surrounding this "ul" tag that drops down. The div tag has a border on top to make it more appealing. But I'm trying to hide this div tag because the border is showing.

This is my jquery code

$(document).ready(function(){

$(function(){
    $('ul.ldd_menu li.topLink ul').hide();
    // DROP MENU
	

    $('li.topLink').hover(function(){
        $(this).find('ul').slideDown()
		$(this).css({'background-color':'#000000', 'color':'#ffffff'});
    },function(){
        $(this).find('ul').hide();
		$(this).css({'background-color':'#ffffff','color':'#000000'});

    });

});
 
 
});

Then I have this menu tag

<ul id="ldd_menu" class="ldd_menu">
	<li>
	<span class='mainMenuTitle-first'><a href='#'>Home</a></span>			
	</li>
	<li class='topLink'>
		<span class='mainMenuTitle'><a href="#">Women</a></span>
			<div class="ldd_submenu">
                        <div class="submenu_top">
                    	<ul  class='submenu_left'>
		                <li class="ldd_heading">Link</li>
				<li><a href="#">Link</a></li>
			       
		         </ul>
                         </div>
                        </div>
</li>
</ul>

the <div class="submenu_top"> is what has the border-top. Now I'm having trouble hiding everything (the ul and div tag) and make it drop down too.

Can someone help?

Thank you