disable hyperlink upon click in css - html

Question

I have a menu constructed of divs. For this I am using the default Joomla menu, modified to my own taste. This is a html question though, so that's why I'm posting it here.
The class of the top menu item that has a sub-menu underneath it is called "deeper parent". When this is clicked, instead of going to the link it has, I want it to just open the sub-menu, that's it.
I tried
.deeper {
pointer-events: none;
cursor: default;
}
.parent {
pointer-events: none;
cursor: default;
}
This however, disables the display of the sub-menu as well, which did show up before I used this css code.
Does anyone know how I can make the sub-menu appear upon hover, as well as upon click (for tables ;) ), without referring to the link that's behidn the top menu item?

Answer 1

You cannot disable click events using CSS. This must be done using Javascript/jQuery.
Assuming you're using jQuery on your site which most Joomla site do, you can use the following:
$(document).ready(function(){
$('#element').on('click', function(){
e.preventDefault();
// Rest of code to show the menu
});
});
You could also set the type for the parent menu item to separator in the Joomla Menu Manager which wraps the menu item in <span> tags rather than <a>