Foundation Drilldown Menu Incorrect Height Calculation when hidden or with longer sub-menus

0
votes

The drilldown menu does not calculate the height correctly. The parent menu is shown but longer child menus are only shown to the height of the parent menu. That is, if there are 5 items on the parent menu then it will only show the first 5 items of the child menu.

Parent Menu

image

Child Menu w Hidden Elements

image

Rendered Code after JS gives height:0

<div class="is-drilldown" style="height: 0px; width: 527px;"></div>

Attempts

  • Javascript after foundation(); to remove height:0px and use height:auto !important; - no success.
  • Making parent menu height as large as the child menu, did not work.
  • z-index and height:auto !important; on the parent ul and the child ul's

I think if the issue is the js calculation not my css styling. The demo on foundation docs has the .is-drilldown height set correctly to match the largest child menu. http://foundation.zurb.com/sites/docs/drilldown-menu.html

Other Notes

My menu is initially hidden by a responsive toggle and .hide-for-medium. However, I tried displaying the drilldown menu all the time and the calculation still didn't work, so I don't think this is the issue.

1
jqueryhtmlcssmenuzurb-foundation
try to give .is-drilldown{overflow:visible} apply this using jquery after foundation(); - Parth Trivedi
Give like $(".is-drilldown").css({"overflow","visible"}); after foundation(); - Parth Trivedi
thanks, didn't even need to use jquery just applied it in css with !important. - starkey01

1 Answers

4
votes

You have to use 

.is-drilldown{overflow:visible !important}