title: Can't click on a navbar dropdown menu option with a custom media query
body: <p>After sucessfully using the answer posted here <a href="https://stackoverflow.com/questions/45780994/navbar-dropdown-menus-display-issue-on-mobile-and-small-devices-with-media-query">navbar dropdown menus display issue on mobile and small devices with media query</a>, I have now this JSFiddle <a href="http://jsfiddle.net/qxgy6L9b/23/" rel="nofollow noreferrer">http://jsfiddle.net/qxgy6L9b/23/</a>.</p>
  
  <p>However, I still have an issue I can't accomplish to fix. If i click on the second dropdown list, it is not possible to click on any item of this submenu. It is due to the fact there is another list item just after. If i remove this item list, the dropdown menu items are clickable.</p>
  
  <p>I guess, this is linked to this CSS code: </p>
  
  <pre><code>   .dropdown-menu{
      position: static;
      width: 100%;
      box-shadow: none;
      background: inherit;
    }
  </code></pre>
  
  <p>I tried several things but impossible to make the items of the second dropdown list clickable if I have an additional item just after.</p>
  
  <p>Does anybody have an idea ? Thank you very much.</p>