JavaScript causing all sub-menus to be one link instead of individual links on mobile (bug)

0 votes
asked Mar 10, 2017 by iaspiretobeglados

My code with a working demo is located at:

https://jsfiddle.net/h744n4ek/

My issue is that on mobile (which can be recreated by resizing the jsfiddle result window), if you expand one of the li's with a submenu, the entire submenu block is treated as a link to the next li.

To clarify:

  <li><a href='#'>SUPPORT</a>
    <ul>
      <li><a href='#'>sub1</a></li>
      <li><a href='#'>sub2</a></li>
      <li><a href='#'>sub3</a></li>
    </ul>
  </li>
  <li><a href='products.html'>PRODUCTS</a>

On mobile, Support's sub1, sub2, and sub3 are treated as a single block with a href to products.html.

I'm quite new to JavaScript and am having issues identifying why this is happening. Could anyone point out where my JS code is going wrong?

1 Answer

+1 vote
answered Mar 10, 2017 by farzin-kanzi

Your problem is here:

#cssmenu > ul > li {
float: none;
}

Removing float: none; will fix it.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...