title: Is there a way to make a link unclickable, but to still use :hover?
body: <p>I'm working with a CMS that only allows links in the navigation. There is one instance where I have a submenu but there is no page attached.  See below.</p>
  
  <ol>
  <li>menu1
  <ul>
  <li>submenu<br>
  <ul>
  <li>item1  </li>
  <li>item2    </li>
  </ul></li>
  </ul></li>
  <li>menu2  </li>
  <li>menu3  </li>
  </ol>
  
  <p>All three top level items (menu 1,2,3) must be clickable + hover.  "Submenu" can't be clickable but the user needs to hover in order to view item1 and item2.</p>
  
  <p>This of course wouldn't be an issue if not for the restrictions in the CMS.  If I add the following CSS then I can't click OR hover.</p>
  
  <pre><code>.subMenu {
     pointer-events: none;
     cursor: default;
  }
  </code></pre>