CSS menus: clicking the sub-menu fires click event on parent too

Question

I'm making some changes to an existing website with CSS drop-down (drop-up, actually) menus that are done by nested lists. There is a working live version here: http://www.escondrijo.com/index_es.html?lang=es

Sorry, I was going to post a screengrab but am not allowed.

I now realise that when I click on the sub-menu items, it triggers a click event for the parent menu item as well (immediately afterwards).

How can I stop that happening? Either by tweaking the menus, or by somehow disabling the click event (but not when the parent menu item is itself clicked).

If you need it, here is the complete HTML for the DIV with this particular menu:

Btw, I have the jquery library available...

Thanks!

            <div id="footer_bar">
            <ul class="menu">
                <li>escondrijo
                    <ul>
                        <li onClick="resetPics(homePics);overlayToggle(document.getElementById('content_thehome'));">guesthouse</li>
                        <li onClick="javascript:window.location.replace('house_rental.html')">house rental</li>
                    </ul>
                </li>
                <li onClick="overlayToggle(document.getElementById('content_therooms'));">the rooms
                    <ul>
                        <li onClick="resetPics(hammockPics);overlayToggle(document.getElementById('content_hammock'));">hammock</li>
                        <li onClick="resetPics(woodburnerPics);overlayToggle(document.getElementById('content_woodburner'));">woodburner</li>
                        <li onClick="resetPics(luzPics);overlayToggle(document.getElementById('content_luz'));">luz</li>
                    </ul>
                </li>
                <li onClick="resetPics(locationPics);overlayToggle(document.getElementById('content_thelocation'));">the location</li>
                <li>reservations
                    <ul>
                        <li onClick="overlayToggle(document.getElementById('content_prices'));">prices</li>
                        <li onClick="overlayToggle(document.getElementById('content_request'));">send request</li>
                        <li onClick="overlayToggle(document.getElementById('content_policies'));">policies</li>
                    </ul>
                </li>
                <li>more info
                    <ul>
                        <li onClick="overlayToggle(document.getElementById('content_travel'));">travel</li>
                        <li onClick="overlayToggle(document.getElementById('content_directions'));">directions</li>
                        <li onClick="overlayToggle(document.getElementById('content_activities'));">activities</li>
                    </ul>
                </li>
                <li><a href="index_es.html?lang=es"><em>&gt;Castellano</em></a></li>
            </ul>
        </div>

Answer 1

It sounds like you need to call jQuery's stoppropagation method. This is called inside your event listener. So, for example:

$("p").click(function(event){
event.stopPropagation();
// do something
});

Another option may be to add the event listener to the parent element and use event delegation to find out which link the user actually clicked on. This is the recommended method for attaching event listeners. It provides much faster performance with far less overhead. You only add one event listener to each list instead of a listener to each item. Here's some more information on using this approach. Hope this helps.