i have a <ul> inside it i have 6 <li> tags 2 of them set to visibility:hidden and positioned absolutely to be setting over 2 <li> tags  , i want when i hover on the <ul> those hidden <li> set to visibility:visible and fade in and the 2 <li> that will appear under them to set to visibility:hidden (cause i want to maintain the same space that`s why i didn`t use display:none ) and fade out , so how can i achieve this using JQuery ?

1. <ul>
       <li></li>
       <li></li>
       <li></li>  <!-- i want them to appear above -->
       <li></li>  <!-- those -->
       <li class="a"></li> <!-- those are hidden and positioned -->
       <li class="a"></li> <!-- absolute -->
   </ul>
   
   
   
   
   
   
   

i hope i made myself clear