Menu icon Foundation
Dropdown in button group shows up but disappears when hovered over??

I made my nav bar a button group. I made it a while ago, but I think it was recommended to make it a button group instead of other top bars because I wanted 4 even centered buttons. Great. Now I am trying to add a dropdown to one of those buttons and the dropdown does show up and work when I click the link, but as soon as I move my mouse down to choose an item the dropdown menu disappears - as soon as the mouse enters the dropdown box.

I would also like the dropdown menu to show up when I hover the link , and be able to hover over each item in the list. I know to add data-options="is_hover:true", but at one point I had this working, added that and it only hovered over the link, not the items.

Help??

I used this post to make the dropdown from the button btw- http://foundation.zurb.com/forum/posts/2689-button-group-dropdowns

 <div class="row">
     <ul class="button-group">
      <div class=" small-12 small-text-center medium-3 large-3 columns"> 
     <li ><a href="charity.html" class="button" data-dropdown="dd1">Choose a charity</a></li></div>
      <div class=" small-12 small-text-center medium-3 large-3 columns">
       <li><a href="acct.html" class="button">My Account</a></li></div>
       <div class=" small-12 small-text-center medium-3 large-3 columns">
         <li><a href="search.html" class="button">Sign Up</a></li></div>
          <div class=" small-12 small-text-center medium-3 large-3 columns">
          <li><a href="about.html" class="button">About</a></li></div>
        </ul>
    <div id="dd1" class="f-dropdown">       
       <li><a href="#">This is a link</a></li>
       <li><a href="#">This is another</a></li>
       <li><a href="#">Yet another</a></li>
    </div>
  </div>
            

         

Top bar

dropdowndisappearlist

I made my nav bar a button group. I made it a while ago, but I think it was recommended to make it a button group instead of other top bars because I wanted 4 even centered buttons. Great. Now I am trying to add a dropdown to one of those buttons and the dropdown does show up and work when I click the link, but as soon as I move my mouse down to choose an item the dropdown menu disappears - as soon as the mouse enters the dropdown box.

I would also like the dropdown menu to show up when I hover the link , and be able to hover over each item in the list. I know to add data-options="is_hover:true", but at one point I had this working, added that and it only hovered over the link, not the items.

Help??

I used this post to make the dropdown from the button btw- http://foundation.zurb.com/forum/posts/2689-button-group-dropdowns

 <div class="row">
     <ul class="button-group">
      <div class=" small-12 small-text-center medium-3 large-3 columns"> 
     <li ><a href="charity.html" class="button" data-dropdown="dd1">Choose a charity</a></li></div>
      <div class=" small-12 small-text-center medium-3 large-3 columns">
       <li><a href="acct.html" class="button">My Account</a></li></div>
       <div class=" small-12 small-text-center medium-3 large-3 columns">
         <li><a href="search.html" class="button">Sign Up</a></li></div>
          <div class=" small-12 small-text-center medium-3 large-3 columns">
          <li><a href="about.html" class="button">About</a></li></div>
        </ul>
    <div id="dd1" class="f-dropdown">       
       <li><a href="#">This is a link</a></li>
       <li><a href="#">This is another</a></li>
       <li><a href="#">Yet another</a></li>
    </div>
  </div>
            

         

Top bar
Rafi Benkual about 5 years ago

Looks like a bug. we tested it here: http://codepen.io/rafibomb/pen/fLtjB

We opened an issue for this. Thanks!
https://github.com/zurb/foundation/issues/5559

annearchy about 5 years ago

First of all, go away spammer.

Thanks Rafi. I only have 1 menu item (the first button) with a dropdown so if I take the code you posted and take the dropdowns off the next two it works for me by itself like this -

<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
     <link rel="stylesheet" href="stylesheets/app.css" />
    <link rel="stylesheet" href="scss/_settings.scss">
   <script src="bower_components/modernizr/modernizr.js"></script>
   <script src="js/app.js"></script>
  </head>
  <body>


  <ul class="button-group">
<li><a href="#" data-dropdown="drop1" data-options="is_hover:true" class="button dropdown">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
  <li><a href="#" class="button">Dropdown Button</a></li>
</ul>


<ul id="drop1" data-dropdown-content class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
</div>



   <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>

    <script src="js/app.js"></script>
  </body>
</html>



But then, as soon as I add in content beneath the button group, the problem happens again!
I will keep checking thanks for looking into it!

annearchy about 5 years ago

I just discovered something else too Rafi-

I have a select box further down in my page. I removed the select box and now the button group dropdown that you posted (first button dropdown only) works!

However, if I put the select box back in, then the dropdown disappears again! Why are they clashing?

  <html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
     <link rel="stylesheet" href="stylesheets/app.css" />
    <link rel="stylesheet" href="scss/_settings.scss">
   <script src="bower_components/modernizr/modernizr.js"></script>
   <script src="js/app.js"></script>
  </head>
  <body>


  <ul class="button-group">
<li><a href="#" data-dropdown="drop1" data-options="is_hover:true" class="button dropdown">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
  <li><a href="#" class="button">Dropdown Button</a></li>
</ul>


<ul id="drop1" data-dropdown-content class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>




                      <div class="small-9 small-centered custom-row-class-centered  medium-6 medium-uncentered large-6 columns">
                            <select name="category" id="right-label" autocomplete="off" > 
<option selected="selected"> 
    Select Category
    </option> 
    <option value="search.html"> 
    Animals
    </option> 
      <option value="search.html"> 
    Children
    </option> 
       <option value="search.html"> 
    Humanitarian
    </option> 
      <option value="search.html"> 
    Medical
    </option> 
      <option value="search.html"> 
    Memorial
    </option> 
</select> 

                    </div>

            </div>
         </div>
   </div>















   <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>

    <script src="js/app.js"></script>
  </body>
</html>

annearchy about 5 years ago

I removed "id="right-label" from the select box and now the dropdown is working fine (crosses fingers!)