prevent parent item from being clickable if it has children items

gistfile1.txt

$("ul.menu li:has(ul.nav-drop)").hover(function () {
    $(this).children("a").click(function () {
        return false;
    });
});


<ul class="menu">
    <li class="menu-item menu-item--current">
        <a class="menu-link" href="http://sitzmark.local/about-us/">About Us</a>
        <ul class="nav-drop">
            <li class="nav-drop-item">
                <a href="http://sitzmark.local/winter-amenities/">Winter Amenities</a>
            </li>
            <li class="nav-drop-item">
                <a href="http://sitzmark.local/concierge/">Concierge</a>
            </li>
        </ul>
    </li>
    <li class="menu-item ">
        <a class="menu-link" href="http://sitzmark.local/accommodations/">Accommodations</a>
    </li>
    <li class="menu-item ">
        <a class="menu-link" href="http://sitzmark.local/rates/">Rates</a>
    </li>
    <li class="menu-item ">
        <a class="menu-link" href="http://sitzmark.local/book-now/">Book Now</a>
    </li>
</ul>

The goal is to prevent 'About Us' from being clickable and only the 'nav-drop-item' being clickable.

btw, I got this solution from Chris Coyier's article here: https://css-tricks.com/snippets/jquery/disable-parent-links-in-nested-list-navigation/