{"action":"opened","issue":{"url":"https://api.github.com/repos/zurb/foundation-sites/issues/7087","labels_url":"https://api.github.com/repos/zurb/foundation-sites/issues/7087/labels{/name}","comments_url":"https://api.github.com/repos/zurb/foundation-sites/issues/7087/comments","events_url":"https://api.github.com/repos/zurb/foundation-sites/issues/7087/events","html_url":"https://github.com/zurb/foundation-sites/issues/7087","id":118141484,"number":7087,"title":"[Responsive Navigation] empty space below menu items","user":{"login":"zzplab","id":7559497,"avatar_url":"https://avatars.githubusercontent.com/u/7559497?v=3","gravatar_id":"","url":"https://api.github.com/users/zzplab","html_url":"https://github.com/zzplab","followers_url":"https://api.github.com/users/zzplab/followers","following_url":"https://api.github.com/users/zzplab/following{/other_user}","gists_url":"https://api.github.com/users/zzplab/gists{/gist_id}","starred_url":"https://api.github.com/users/zzplab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zzplab/subscriptions","organizations_url":"https://api.github.com/users/zzplab/orgs","repos_url":"https://api.github.com/users/zzplab/repos","events_url":"https://api.github.com/users/zzplab/events{/privacy}","received_events_url":"https://api.github.com/users/zzplab/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-11-20T22:37:41Z","updated_at":"2015-11-20T22:37:41Z","closed_at":null,"body":"**How can we reproduce this bug?**\r\n\r\n1. On mobile view (small) both using Safari/Chrome on iMac and iOS Safari iPhone:\r\n2. Go to page [responsive-navigation](http://foundation.zurb.com/sites/docs/responsive-navigation.html)\r\n3. Look at the second Responsive Menu example below:\r\n<ul class=\"vertical menu\" data-responsive-menu=\"drilldown medium-dropdown\" style=\"width: 300px;\">\r\nSee image below.\r\n\r\n**What did you expect to happen?**\r\nOn level 1 and 2 of the menu I expect the menu and the hr below it to be normally close together.\r\n**What happened instead?**\r\nOn level 1 and 2 of the menu I see the large vertical white space below the menu and above the hr line.\r\n\r\n**Test case**\r\n[responsive-navigation](http://foundation.zurb.com/sites/docs/responsive-navigation.html)\r\n\r\nThis is causing the issue, the 3rd level menu m3:\r\n```\r\n<ul class=\"vertical submenu menu\" data-submenu id=\"m3\">\r\n          <li><a href=\"#\">Item 1A</a></li>\r\n          <li><a href=\"#\">Item 1B</a></li>\r\n          <li><a href=\"#\">Item 1C</a></li>\r\n          <li><a href=\"#\">Item 1D</a></li>\r\n          <li><a href=\"#\">Item 1E</a></li>\r\n        </ul>\r\n```\r\nMaking the menu much longer will make it more obvious:\r\n```\r\n<ul class=\"vertical submenu menu\" data-submenu id=\"m3\">\r\n          <li><a href=\"#\">Item 1A</a></li>\r\n          <li><a href=\"#\">Item 1B</a></li>\r\n          <li><a href=\"#\">Item 1C</a></li>\r\n          <li><a href=\"#\">Item 1D</a></li>\r\n          <li><a href=\"#\">Item 1E</a></li>\r\n          <li><a href=\"#\">Item 1E</a></li>\r\n          <li><a href=\"#\">Item 1E</a></li>\r\n          <li><a href=\"#\">Item 1E</a></li>\r\n          <li><a href=\"#\">Item 1E</a></li>\r\n          <li><a href=\"#\">Item 1E</a></li>\r\n          <li><a href=\"#\">Item 1E</a></li>\r\n        </ul>\r\n```\r\nBelow 3 screenshots on 'small' screen from the issue with all 3 menu levels:\r\n![responsive-issue](https://cloud.githubusercontent.com/assets/7559497/11313643/b40930c6-8fde-11e5-8ce5-e9afe97463c3.jpg)"}}