0

I'm having a dropdown menu based on pureCss. This menu can contain 20 or more entries:

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">Menu</a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Entry</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Entry</a></li>

        [... many more entries ...]

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Entry</a></li>
      </ul>
    </li>
  </ul>
</div>

See this codepen

On smaller screens this quickly leads to the user needing to scroll down to reach the bottom entries - which can be really painful/impossible without a mousewheel, as the hovering is often lost.

Is there a way to modify the CSS so that the entries automatically get wrapped into a second or even third column before the bottom is reached?

Peter Albert
  • 16,917
  • 5
  • 64
  • 88
  • you could use a scrollbar for overflow, in which case this might help you http://stackoverflow.com/questions/5715705/always-show-vertical-scrollbar-in-select – Jesse Oct 14 '15 at 14:35
  • @Jesse thought about this, too - but from a UI perspective this is not much better than the window scrollbar. :-( – Peter Albert Oct 14 '15 at 14:37
  • 1
    CSS columns might be an option here although if you have 20 entries in a menu you might want to rethink the display strategy on smaller screens – Paulie_D Oct 14 '15 at 14:55

0 Answers0