阻止 CSS 下拉菜单在内部单击时关闭

Question

我有一个我正在使用的 CSS 下拉菜单，它工作正常，唯一的事情是当您单击菜单内的任意位置时，我想阻止菜单关闭。

现在，只要您在主导航内点击，它就会关闭，这使得点击链接等变得困难。

它目前在我们的网站 www.jonasconstruction.com 上直播。如有必要，我可以在此处附上完整的代码。

谢谢。

<div class="top-menu top-menu-mobile">
  <header class="dark">
    <nav class="navigate"> 
      <a href="javascript:void(0);" class="ic opened"> 
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
      </a>
      <a href="javascript:void(0);" class="ic closed"></a>
          <ul class="main-nav"></a> 
              <li class="top-level-link"> 
                  <a class="mega-menu" href="/products">
                        <span>Products</span></a> 
               <div class="sub-menu-block"> 
               <div class="row"> 

Answer 1

HTML 标记在一些地方缺少一些结束标记。子菜单 div 是发生此问题的地方。我将首先浏览 html 标记并确保使用正确的标签礼仪。然后我会将您的子菜单制作成列表项（但它们的样式与您的顶级列表项不同）。这应该将链接区域扩展为菜单的宽度，从而解决此问题。