Hogyan tudom ezt megoldani?

Sziasztok! Adott egy jQuery lenyíló menü, melyen van :hover effekt, meg mindenféle finomság. Nos azt szeretném elérni, hogy a képen látható (http://kepfeltoltes.hu/view/130210/253490846N_vtelen_www.kepfeltoltes.hu_.png) SOCIAL felirat (amin ugye :hover van a css-ben) miután az egeret lejjebb viszem a lenyíló menü többi részére, ugyanúgy fehér maradjon addig, míg a lenyíló menü be nem záródik, tehát így: http://kepfeltoltes.hu/view/130210/686724628N_vtelen_www.kepfeltoltes.hu_.png

Remélem érthetően magyaráztam.:$

Köszönöm a segítséget előre is!:)

A kódom így néz ki (hátha kell):

jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("ul#menu div").hover(function() {

//console.log("ready!");

$(this).parent().find("ul").slideDown("speed");

$(this).parent().hover(

function(){},

function() {

$(this).parent().find("ul").slideUp("speed");

}

);

});

});

</script>

html:

<div id="keret">

<ul id="menu">

<li><a href="#">HOME</a></li>

<li><a href="#">BLOG</a></li>

<li>

<div>JACK</div>

<ul>

<li><a href="#">SZEMÉLYES</a></li>

<li><a href="#">MUNKÁSSÁG</a></li>

<li><a href="#">EGYÉB</a></li>

</ul>

</li>

<li>

<div>SOCIAL</div>

<ul>

<li><a href="#" target="_blank">FACEBOOK</a></li>

<li><a href="#" target="_blank">TWITTER</a></li>

<li><a href="#" target="_blank">YOUTUBE</a></li>

<li><a href="#" target="_blank">YAMM.HU</a></li>

<li><a href="#" target="_blank">ASK.FM</a></li>

</ul>

</li>

<li><a href="#">KÖNYVEK</a></li>

<li><a href="#">KÉPEK</a></li>

<li><a href="#">LETÖLTÉS</a></li>

<li><a href="#">KONTAKT</a></li>

<li><a href="#">CLUB</a></li>

</ul>

<div style="clear:both"></div>

</div>

CSS:

* {

padding: 0;

margin: 0;

}

div#keret {

width: 1000px;

margin: 0 auto;

}

ul#menu div {

cursor: pointer;

}

ul#menu div,

ul#menu a {

color: #47431d;

text-decoration: none;

font-family: arial;

font-weight: bold;

padding: 10px 22px;

display: block;

}

ul#menu li {

float: left;

list-style: none;

font-size: 15px;

background-color: #cad342;

margin-right: 1px;

text-align: center;

background: -moz-linear-gradient(top, #dde38b 0%, #cad23f 100%);

background: -webkit-gradient(linear, left top, left bottom, from(#dde38b), to(#cad23f));

}

ul#menu li ul{

display: none;

position: absolute;

}

ul#menu li ul li a{

float: none;

background: #ba4847;

text-align: left;

color: #ffffff;

}

ul#menu li ul li{

float: none;

}

ul#menu li ul li a:hover {

color: #000;

}

ul#menu li:hover {

background: #ba4847;

color: #ffffff;

}

ul#menu li a:hover {

background: #ba4847;

color: #ffffff;

}

ul#menu li div:hover {

color: #ffffff;

}