Handling Event Propagation on an Expandable Menu?

Handling Event Propagation on an Expandable Menu?

So, I've got the following expandable menu:

  1.                 <ul id="navigation">
                        <li><a href="index.html">HOME</a></li>       
                        <li><a href="aboutus.html">ABOUT US</a></li>
                        <li id="expand"><a href="collection.html">COLLECTION</a>
                            <ul id="active">
                                <li><a href="collection1.html">ANTIQUE DOLLS</a></li>
                                <li><a href="collection2.html">DOLL ACCESSORIES</a></li>
                                <li><a href="collection3.html">FOLK ART</a></li>
                                <li><a href="collection4.html">FINE ART</a></li>
                                <li><a href="collection5.html">CONTEMPORARY ART</a></li>
                                <li><a href="collection6.html">MISCELLANEOUS ANTIQUES</a></li>
                            </ul>
                        </li>
                        <li><a href="services.html">SERVICES</a></li>
                        <li><a href="howtobuy.html"> HOW TO BUY</a></li>
                        <li><a href="contact.html">CONTACT US</a></li>
                    </ul>
















I've got the following code to handle toggling the visibility of the sub-menu on click (see this for what the cookie is doing):
  1. $.cookie('has_clicked', 'false', {path: '/' });

    $(document).ready(function() {
    if ($.cookie('has_clicked') === 'false') {
         $('#active')
          .hide()
          .click(function(event) {
            event.stopPropagation();
        });
    }
       
        $('#expand').click(function(event){
                if ($.cookie('has_clicked') === 'false')
                    $.cookie('has_clicked', 'true');
                else
                    $.cookie('has_clicked', 'false')
                event.stopPropagation();
                event.preventDefault();
                $('#active').slideToggle();
        });

       
        $('#active > li').click(function(event){
            event.stopPropagation();
        });
    });


























My question is relating to the last line of code:
  1.     $('#active > li').click(function(event){
            event.stopPropagation();
        });

My intention with that line is the following: without it,  when you click on the links in the submenu, they register their ancestor's click event, which, in this case, (1) keeps you from being able to follow the link and (2) produces the toggle effect on '#active'.

However, calling stopPropagation() means that if I subsequently click on the ancestor (i.e., '#expand'), I no longer get the preventDefault() or toggle behavior: instead, it follows the link (in this case, back to the same page).

How can I get the right functionality?

Edit: original post had some typos