Question: I create a 3-level CSS megamenu on a responsive website. It works fine on the desktop size, but on the mobile version if I click on the menu, instead of showing the submenu, it follows the link added in `href=""` attribute.

Here is the screenshot of the mobile menu (to make this screenshot I removed the anchor tag to be able to show you how it should look like):

![screenshot of the mobile menu](https://i.stack.imgur.com/kNc2N.jpg)

It's fine on the desktop version, because there I use the `:hover` pseudoclass to show the submenu, but I can't do that in small size, because I want to make the menu useable on touchscreen, so I converted the `:hover` pseudoclass to click event by means of jQuery. (I don't want to completely remove the anchor tag, because that way I wouldn't be able to use it either in desktop size.)

I tried to make the link inactive with jQuery (see below), and it works, however it doesn't only prevent the anchor tag from following the url, but also disables the submenu.

```
$("li.menu > a").on("click", function() {
  return false;
});

```

How could I improve my code to prevent the browser from following the link on click, but still show the submenu in the way it's on the screenshot?

Answer: 
You can do this in at least 4 ways.

* Set the `href` attribute to `#` (will make your page scroll to top tho)
* Set the `href` attribute to `javascript:void(0);`
* Remove the `href` attribute but add `cursor:pointer` for each `a` element with css `li.menu > a { cursor:pointer; }` (I suggest this)
* Use [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault) with javascript (jquery, see below).

`$("li.menu > a").on("click", function(e) {
 e.preventDefault();
 });`
did you try :

```
   $("li.menu > a").on("click", function(e) {
        e.preventDefault();
        functionToShowTheMenu();
    });

```