Hiding text on hover of menu and submenu

Question

I want to hide a text when I hover in my menu1 and on its sub menus too. How can I do it ? Here is my code : http://jsfiddle.net/bulina/F2R7F/

<p id="text"> <b>This is the text that will hide on hover</b> </p>
<div id="menu4">
<ul>
<li id="list"><center><a href="#" >Menu1</a></center>
<ul>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub4</a></li>
<li><a href="#">Sub5</a></li>
<li><a href="#">Sub6</a></li>
<li><a href="#">Sub7</a></li>
<li><a href="#">Sub8</a></li>
</ul>
</li>   

<li><center><a href="#">Menu2</a></center>
<ul>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>

</ul>
</li>

<li><center><a href="#">Menu3</a></center>
<ul>

<li><a href="#">Sub7</a></li>
<li><a href="#">Sub8</a></li>
</ul>
</li>
</div>

Answer 1

We can use jQuery hover method to handle both mouseEnter and mouseLeave events by using its callbacks respectively.

$(selector).hover(mouseIn, mouseOut)

In above question, two different jQuery methods of hover and mouseout plays an independent role on same #text element. Hence their working doesn't give expected output.

All credits to @anton. Refer fiddle from @anton comment above : jsfiddle.net/Alfie/F2R7F/2