Search code examples
javascripthtmlcsszurb-foundation-5

Foundation5 Stop Dropdown from Being clickable

When I hover over the dropdowns on:

Website with Issue

They do not open unless they are clicked. The website is built using Foundation5 (FoundationPress) and I am not able to figure out how to disable this behaviour in favour of having the dropdown appear on hover.

Thanks

Solution

  • Try using the hoverable dropdown options on the menu accessed through the data-options attribute. Similar convention with some of your content below as an example:

    <a href="#" data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000">Course Locations</a>

    <ul id="hover1" class="f-dropdown" data-dropdown-content>
      <li><a href="#">Brampton</a></li>
      <li><a href="#">Burlington</a></li>
      <li><a href="#">Hampton</a></li>
      <li><a href="#">etc.</a></li>
    </ul>

    You can set the hover_timout in milliseconds to delay closing after removing your mouse from the area.

    Docs for this here: http://foundation.zurb.com/docs/components/dropdown.html