Prevent clicking with CSS

by ryanwheale

HTML

<ul class="categories-nav">
  <li>
    <a href="#">NOT clickable</a>
    <ul>
      <li><a href="#">Clickable</a></li>
      <li><a href="#">Clickable</a></li>
      <li><a href="#">Clickable</a></li>
    </ul>
  </li>
</ul>

CSS

.categories-nav > li {
    cursor: default;
    position: relative;
}

.categories-nav > li:after {
    content: " ";
    position: absolute;
    z-index: 1;
    top:0; bottom:0; left:0; right:0;
}