JQuery Dropdown Link / Take off链接？

Question

我正在努力进行下拉动作。它必须是一个可点击的菜单，而不是悬停。

问题是我的菜单一直包含链接，所以子菜单有一个链接，但内部也有一个隐藏的下拉列表。

问题是，如果我从子菜单中取出链接，那么用户无法访问该页面，但是如果我将其保留，那么我无法显示其中的下拉列表，因为它将链接到子菜单页。

解决此问题的最佳方法/构建此下拉列表的常用方法是什么？

由于

HTML

<!-- Dropdown -->
        <ul>
            <!-- Menu Item -->
            <li>
                <a href="http://www.menulink.com">Menu 1</a>
                <!-- Sub menu -->
                <ul>
                    <li>
                        <!-- When clicked show sub menu or link to page? -->
                        <a href="http://www.menusublink.com">Sub Menu 1</a>
                        <!-- Sub Sub Menu hidden -->
                        <ul style="display: none;">
                            <li><a href="http://www.menusubsublink.com">Sub Sub Menu 1</a></li>
                            <li><a href="http://www.menusubsublink.com">Sub Sub Menu 2</a></li>
                            <li><a href="http://www.menusubsublink.com">Sub Sub Menu 3</a></li>
                        </ul>
                    </li>
                    <li><a href="">Sub Menu 2</a></li>
                    <li><a href="">Sub Menu 3</a></li>
                </ul>
            </li>
            <!-- Menu Item -->
            <li><a href="http://www.menu1link.com">Menu 2</a></li>
            <!-- Menu Item -->
            <li><a href="http://www.menu1link.com">Menu 3</a></li>
            <!-- Menu Item -->
            <li><a href="http://www.menu1link.com">Menu 4</a></li>
        </ul>