css and Jquery show hide sticky submenu
===

ok, so I have a navigation with a horizontal sub-nav that needs to be sticky on child pages. I have all of that working with css, but the issue is that I need the sticky ul on the child pages to be hidden when I hover over another parent li and go back to sticky when I am not hovering. I think jquery is the only solution for this. I will post what I have so far and a link to my issue.

    <style type="text/css">
    .current-menu-parent ul{
	display:block !important;
	position:absolute!important;
    }
    #primary-nav ul li:hover ul {
	display:inline;
	position:absolute;
    }
    #primary-nav ul li > ul{
        display:none;
    }
    </style

    <script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript">    </script>
    <script type="text/javascript">
    $(document).ready(function(){
     $("#primary-nav ul li").mouseover(function(){
      $('.current-menu-parent ul').hide();
    });
     $("#primary-nav ul li").mouseout(function(){
      $(".current-menu-parent ul").show();
    });
    });
    </script>
    <body>
    <div id="primary-nav">
      <ul>
        <li>item</li>
        <li class="current-menu-parent>This is the current menu parent item
            <ul>
                <li>Current page</li>
                <li>page</li>
                <li>page</li>
            </ul>
         </li>
       <ul>
    </div>

Sorry if there are typo's just re-wrote quickly.
here is the link so you can see the problem first hand. Click on a sub page and you will see...
test.kyrusmobile.com
