jquery - How can I manage the dimansions of #homeSub in CSS so it won't diappear when I move my mouse from homeBox to homeSub? -

when hover on #homebox, #homesub appears. when want move mouse click on #homesub disappears. know should naturally appear , disappear toggle effect need fix position #homesub disappear when move mouse out of both #homebox , #homesub.

$(function() {    $("#homebox").hover(function() {      $("#homesub").toggle("slow");    });  });

#homesub {    background-color: yellow;    display: none;    position: relative;    float: left;    margin: 0;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul>    <li><a id="homebox" href="#">home</a>    </li>    <li><a id="homesub" href="#">you</a>    </li>  </ul>

attach hover event ul:

html:

<ul id="list">   <li><a id="homebox" href="#">home</a>   </li>   <li><a id="homesub" href="#">you</a>   </li> </ul> 

js:

$(function() {   $("ul#list").hover(function() {     $("#homesub").toggle("slow");   }); });