<!doctype html> <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> <html class="no-js" lang="en" dir="ltr"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet"> <link href="../assets/css/foundation.css" rel="stylesheet" /> <style> </style> </head> <body> <div class="grid-x grid-margin-x"> <div class="cell"> <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium"> <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title">Menu</div> </div> <div class="top-bar" id="main-menu"> <div class="top-bar-left"> <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown"> <li class="has-submenu"> <a href="#">One</a> <ul class="submenu menu vertical" data-submenu> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li> <a href="#">Three</a> <ul class="submenu menu vertical" data-submenu> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> </ul> </li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> <div class="top-bar-right"> <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown"> <li class="has-submenu"> <a href="#">One</a> <ul class="submenu menu vertical" data-submenu> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li> <a href="#">Three</a> <ul class="submenu menu vertical" data-submenu> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> </ul> </li> <li class="has-submenu opens-left"> <a href="#">Broken?</a> <ul class="submenu menu vertical" data-submenu> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li> <a href="#">Three</a> <ul class="submenu menu vertical" data-submenu> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> </ul> </li> <li class="has-submenu"> <a href="#">Two</a> <ul class="submenu menu vertical" data-submenu> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li> <a href="#">Three</a> <ul class="submenu menu vertical" data-submenu> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> </ul> </li> <li><a href="#">Three</a></li> </ul> </div> </div> <div class="grid-x grid-padding-x"> <div class="cell"> <p>Hover on Broken</p> <p>Dropdown should open towards left and not off screen.</p> <ul> <li>The dropdowns should open underneath the parent element.</li> <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li> <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li> <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li> <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li> <li>Dropdown parent element arrows should point down.</li> <br> <li>On mobile, the arrows to access submenu should be at the right of the dropdown.</li> </ul> </div> </div> </div> </div> <script src="../assets/js/vendor.js"></script> <script src="../assets/js/foundation.js"></script> <script> $(document).foundation(); </script> </body> </html>