Toggling jquery submenu items

Question

When I am trying to toggle the SubMenu item, the item toggles but the first level menu is closed. The menu should not hide when the person clicks on the sub menu item. for example if you click on SSNIT and goto "core services" the sub menu appears but the first level menu item is closed. Need some expertise for this fix? You can view the code on JSFiddle here http://jsfiddle.net/3aRSr/.

HTML:

        <div id="container">
          <div style="display: inline-block">
            <ul id="menu">
              <li><a href="">Home</a></li>
              <li>
                <a href="#">SSNIT</a>
                <ul>
                  <li>
                    <a href="">About SSNIT</a>
                  </li>
                  <li>
                    <a href="/Pages/new-ssnit.aspx">New SSNIT</a>
                  </li>
                  <li>
                    <a href="">Board of Trustees</a>
                  </li>
                  <li>
                    <a href="#">Core Services</a>
                    <ul>
                      <li><a href="/">Membership</a></li>
                      <li><a href="/">Investments</a></li>
                      <li><a href="/">Benefits</a></li>
                      <li><a href="/x">Students Loan</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="/">Executive Committee</a>
                  </li>
                  <li>
                    <a href="">Mission and Vision</a>
                  </li>
                </ul>
              </li>
              <li><a href="">Statistics</a></li>
              <li><a href="">News</a></li>
              <li><a href="">Resources</a></li>
              <li>
                <a href="#">Self Services</a>
                <ul>
                  <li>
                    <a href="#">Benefit Application</a>
                  </li>
                  <li>
                    <a href="#">Employer Enrolment</a>
                  </li>
                  <li>
                    <a href="#">Member Enrolment</a>
                  </li>
                </ul>
              </li>
              <li><a href="">FAQs</a></li>
              <li>
                <a href="#">Contact Us</a>
                <ul>
                  <li>
                    <a href="/">Contact Information</a>
                  </li>
                  <li>
                    <a href="/">Customer Service Locations</a>
                  </li>
                  <li>
                    <a href="/">Telephone Directory</a>
                  </li>
                  <li>
                    <a href="/">SSNIT Locations Map</a>
                  </li>
                </ul>
              </li>   
            </ul>
          </div>

CSS:

        #menu, #menu2, #container {
            width: 100%;
            margin: 0;
            padding: 1px 0 0 0;
            list-style: none;
            background: #DCDCDC; 
          }

            #menu li, #menu2 li {
              float: left;
              padding: 0 0 0 0;
              position: relative;
              line-height: 0;
            }

            #menu a, #menu2 a {
              float: left;
              height: 25px;
              padding-top: 0; 
              padding-bottom: 0; 
              padding-left: 10px;
              padding-right: 10px;
              color: #403E3F; 
              text-transform: uppercase;
              font: bold 12px/25px Arial, Helvetica;
              text-decoration: none;
            }

            #menu li:hover > a, #menu2 li:hover > a {
              color: #fafafa;
            }


            #menu li a:hover, #menu2 li a:hover /* IE6 */ {
              color: #fafafa;
            }

            #menu li:hover > ul, #menu2 li:hover > ul {
              /*display: block;*/
            }

            /* Sub-menu */

            #menu ul, #menu2 ul {
              list-style: none;
              margin: 0;
              padding: 0;
              display: none;
              position: absolute;
              top: 40px; /* louis: 50px */
              left: 0;
              z-index: 99999;
              background: #DCDCDC; 
            }

              #menu ul ul, #menu2 ul ul {
                top: 0px;
                left: 195px; /* louis: 160px */
              }

              #menu ul li, #menu2 ul li {
                float: none;
                margin: 0;
                padding: 0;
                display: block;
                -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
                -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
                box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
              }

                #menu ul li:last-child, #menu2 ul li:last-child {
                  -moz-box-shadow: none;
                  -webkit-box-shadow: none;
                  box-shadow: none;
                }

              #menu ul a, #menu2 ul a {
                padding: 10px;
                height: 10px;
                width: 165px; 
                height: auto;
                line-height: 1;
                display: block;
                white-space: nowrap;
                float: none;
                text-transform: none;
              }

              #menu ul a, #menu2 ul a /* IE6 */ {
                height: 10px;
              }

              *:first-child + html #menu ul a, *:first-child + html #menu2 ul a /* IE7 */ {
                height: 10px;
              }

                #menu ul a:hover, #menu2 ul a:hover {
                  background: #0186ba;
                }

              #menu ul li:first-child > a, #menu2 ul li:first-child > a {
              }

                #menu ul li:first-child > a:after, #menu2 ul li:first-child > a:after {
                  content: '';
                  position: absolute;
                  left: 30px;
                  top: -10px; 
                  width: 0;
                  height: 0;
                  border-left: 12px solid transparent; 
                  border-right: 12px solid transparent; 
                  border-bottom: 16px solid #DCDCDC; 
                }

              #menu ul ul li:first-child a:after, #menu2 ul ul li:first-child a:after {
                left: -10px; 
                top: 5px; 
                width: 0;
                height: 0;
                border-left: 0;
                border-bottom: 12px solid transparent; 
                border-top: 12px solid transparent; 
                border-right: 16px solid #DCDCDC;
              }

              #menu ul li:first-child a:hover:after, #menu2 ul li:first-child a:hover:after {
                border-bottom-color: #0186ba;
              }

              #menu ul ul li:first-child a:hover:after, #menu2 ul ul li:first-child a:hover:after {
                border-right-color: #0186ba;
                border-bottom-color: transparent;
              }


              #menu ul li:last-child > a, #menu2 ul li:last-child > a {
              }

            Clear floated elements #menu:after, #menu2:after {
              visibility: hidden;
              display: block;
              font-size: 0;
              content: " ";
              clear: both;
              height: 0;
            }

          * html #menu, * html #menu2 {
            zoom: 1;
          }

          IE6 *:first-child + html #menu, *:first-child + html #menu2 {
            zoom: 1;
          }

JavaScript:

         $(document).ready(function () {
         $("#menu ul li, #menu > li ul li").click(function () {
            //mouse click toggle menu items
              $('>ul').toggle(        
                // mouseover
                function () {              
                  $(this).find('>ul').fadeIn('slow');         
                });
            });
        });

Answer 1

Based on your html structure all you probably need is this:

$(document).ready(function () {

    $("#menu li > a").on('click', function(e){
       $(this).siblings('ul').toggle('slow');
    });

});

Fiddle

With this no matter how many levels of sub menu appears this one event registration is sufficient.

Note that the toggle pseudo event has been deprecated and you need to handle it yourself using click event.