Slide toggle in list items, but should not toggle when click on the child item

Question

What I'm trying to do is ..

when I click the first list item it should display what are the options for that list item then if the user click any of that options, the slide toggle must not be toggled

that's my problem :<. the toggle enables when i click the item inside the list item

Any kind of help would be great, thanks :D

This is my HTML File

<div class='div_content_wrapper'>
    <script src="../../script/jquery/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $(".li_submenu_notactive").hide();
        $(".li_menu_notactive").click(function(){
        $(".li_submenu_notactive", this).slideToggle(120);
      });
    });
    </script>

                <div class='div_navigation'>
                    <ul class='ul_navigation_menu'>
                        <li class='li_menu_notactive'><label>Home</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Notifications and Schedules for Today</label></li>
                            </ul>                   
                        </li>
                        <li class='li_menu_active'><label>Crew Management</label>
                            <ul>
                                <li class='li_submenu_active'><label>Add Account</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Account</label></li>
                            </ul>                   
                        </li>
                        <li class='li_menu_notactive'><label>User Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Add Account</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Account</label></li>
                            </ul>
                        </li>
                        <li class='li_menu_notactive'><label>Service Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Add Services / Types</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Services</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Types</label></li>
                            </ul>
                        </li>
                        <li class='li_menu_notactive'><label>Schedule Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>View / Update Schedules</label></li>
                            </ul>
                        </li>
                        <li class='li_menu_notactive'><label>Content Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Page Wallpapers</label></li>
                                <li class='li_submenu_notactive'><label>Page Infos</label></li>
                                <li class='li_submenu_notactive'><label>Employee O.T.M</label></li>
                                <li class='li_submenu_notactive'><label>Company Logo</label></li>
                                <li class='li_submenu_notactive'><label>Terms of Services and Conditions</label></li>
                            </ul>                   
                        </li>
                        <li class='li_menu_notactive'><label>Bank Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Add Option/Account</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Option/s</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Account/s</label></li>
                            </ul>
                        </li>
                        <li class='li_menu_notactive'><label>Report Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Accounts</label></li>
                                <li class='li_submenu_notactive'><label>Services</label></li>
                                <li class='li_submenu_notactive'><label>Schedules</label></li>
                            </ul>                       
                        </li>
                        <li class='li_menu_notactive'><label>Store Configurations</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Manage Store Option/s</label></li>
                            </ul>
                        </li>

                    </ul>
                </div>

This is my CSS File

body{
    display:inline !important;
    font-family:segoe ui;
    background-color:#111111;
}


/*divs*/
#div_body_wrapper{
    position:absolute;
    top:0px;
    padding:10px;
}

.div_clear{
    clear:both;
}

.div_banner{
    float:left;
    width:1320px;
    min-height:30px;
    background-color:black;
    color:white;
}

.div_body{
    float:left;
    width:1125px;
    min-height:640px;
    background-color:#313131;
    margin-left:5px;
}

.div_footer{
    float:left;
    width:1320px;
    height:30px;
    background-color:black;
    color:white;
    padding:5px;
}

.div_navigation{
    float:left;
    width:180px;
    min-height:30px;
    background-color:#202020;
}

.div_banner, .div_body, .div_navigation{
    padding:5px;
    margin-bottom:5px;
}

.div_content_wrapper{
    display: block;
    overflow:auto;
}
/*divs*/

/*div banner*/
.btn_banner{
    float:right;
    margin-top:30px;
    border:0px;
    padding:5px;
    background-color:#ffb804;
    border-radius:3px;
    font-size:18px;
    margin-left:5px;
    margin-right:5px;
}

.btn_banner:hover{
    background-color:#636363;
    color:white;
    cursor:pointer;
}
/*div banner*/

/*div banner*/
#lbl_banner{
color:white;
font-size:50px;
font-family:Century Gothic;
font-weight:bold;   
text-shadow:
   -2px -2px 0 #000,  
   2px -2px 0 #000,
   -2px 2px 0 #000,
   2px 2px 0 #000;
}
/*div banner*/

/*div navigation*/
.ul_navigation_menu{
    list-style:none;
    padding:0;
}

.ul_navigation_menu li{
    list-style:none;
    margin-top:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:5px;
    font-weight:bold;
    color:white;
    border-style:solid;
    border-color: #3e3e3e;
    border-width:0px;
    border-bottom-width:3px;
}

.ul_navigation_menu li label{
    background-color:#ffb804;
    border-radius:3px;
    color:black;
    padding:5px;
}

.ul_navigation_menu li label{
    cursor:pointer;
}

.ul_navigation_menu li label{
    display:block;
}

.ul_navigation_menu li ul{
    list-style:none;
    padding:0;
}

.ul_navigation_menu li ul li{
    display:block;
    list-style:none;
    background-color:#111111;
    margin-top:5px;
    margin-left:10px;
    padding-left:5px;
    padding-right:5px;
    color:white;
    font-weight:normal !important;
    border-radius:3px;
}

.ul_navigation_menu li ul li label{
    background-color:#111111;
    color:white;
}

.ul_navigation_menu li ul li:hover > label{
    background-color:#4a4a4a;
    cursor:pointer;
}

.li_menu_active ul li {
    display:block !important;
}

.li_submenu_active label{
    background-color:#EB8921 !important;
}
/*div navigation*/

Answer 1

Attach the click event to thelabel to be more explicit and avoid the propagation jsFiddle

$(document).ready(function(){
    $(".li_submenu_notactive").hide();
    $(".li_menu_notactive label").click(function(){
        $(this).next('ul').find(".li_submenu_notactive").slideToggle(120);
    });
});

Use next() to transverse to the following ul and slideToggle() the child notactive li

Answer 2

Easiest solution I could think of: Add the toggle listener to label instead of li

HTML li:

<li class='li_menu_notactive'><label class="li_menu_label">Home</label>
    <ul>
        <li class='li_submenu_notactive' style="display: none;"><label>Notifications and Schedules for Today</label></li>
    </ul>                   
</li>

JQuery:

$(document).ready(function(){
    // we have this done in HTML by adding the following to .li_submenu_notactive :
    // style="display: none;"
    // $(".li_submenu_notactive").hide(); 

    $(".li_menu_label").click(function(){
        // let's find a .li_submenu_notactive element under the same parent as the triggering label
        $(this).siblings(".li_submenu_notactive").slideToggle(120);
    });
});