--- /dev/null
+<!doctype html>
+<html>
+<head>
+ <title>Menu Demo: Top-aligned Menu</title>
+ <link rel="stylesheet" href="../demos.css" type="text/css" />
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#topMenu").menu({
+ position: { of: "ul:has(a.ui-state-focus):last" }
+ });
+ });
+ </script>
+ <style>
+ .ui-menu { width: 200px; margin-bottom: 2em; }
+ </style>
+</head>
+<body>
+
+<ul id="topMenu">
+ <li><a href="#">Aberdeen</a></li>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Adamsville</a></li>
+ <li><a href="#">Addyston</a></li>
+ <li>
+ <a href="#">Delphi</a>
+ <ul>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Saarland</a></li>
+ <li><a href="#">Salzburg</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Saarland</a></li>
+ <li>
+ <a href="#">Salzburg</a>
+ <ul>
+ <li>
+ <a href="#">Delphi</a>
+ <ul>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Saarland</a></li>
+ <li><a href="#">Salzburg</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Adamsville</a>
+ <ul>
+ <li><a href="#">Aberdeen</a></li>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Adamsville</a></li>
+ <li><a href="#">Addyston</a></li>
+ <li>
+ <a href="#">Delphi</a>
+ <ul>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Saarland</a></li>
+ <li><a href="#">Salzburg</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Saarland</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Perch</a>
+ <ul>
+ <li><a href="#">Addyston</a></li>
+ <li><a href="#">Delphi</a></li>
+ <li><a href="#">Perch</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+</ul>
+
+</body>
+</html>