Merge pull request #620 from yahoo/fix545

Reset style for horizontal dropdown separator (fixes #545)
pure-css · Dec 28, 2016 · bcba51d · bcba51d
2 parents 14c7ef9 + 606ab8c
commit bcba51d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/src/menus/css/menus-skin.css b/src/menus/css/menus-skin.css
@@ -1,6 +1,7 @@
 /* misc default styling */
 
-.pure-menu-separator {
+.pure-menu-separator,
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
     background-color: #ccc;
     height: 1px;
     margin: .3em 0;
@@ -12,6 +13,12 @@
     margin: 0 .3em ;
 }
 
+/* Need to reset the separator since submenu is vertical */
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
+    display: block;
+    width: auto;
+}
+
 .pure-menu-heading {
     text-transform: uppercase;
     color: #565d64;

diff --git a/src/menus/tests/manual/menus.html b/src/menus/tests/manual/menus.html
@@ -10,6 +10,7 @@
     <script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
     <style>
         h1 {
+            margin-top: 2em;
             font-size: 15px;
             font-weight: normal;
         }
@@ -194,6 +195,7 @@ <h1>div.pure-menu.pure-menu-custom-2, with nested children. Here, a width is set
                         <a href="#" class="pure-menu-link">More Stuff</a>
                         <ul class="pure-menu-children">
                             <li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Foo</a></li>
+                            <li class="pure-menu-separator"></li>
                             <li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Bar</a></li>
                             <li class="pure-menu-item"><a class="pure-menu-link" href="/react">Baz</a></li>
                         </ul>
@@ -206,6 +208,30 @@ <h1>div.pure-menu.pure-menu-custom-2, with nested children. Here, a width is set
         </ul>
     </div>
 
+    <h1>div.pure-menu.pure-menu-horizontal with nested dropdown and separator</h1>
+    <div class="pure-menu pure-menu-horizontal">
+        <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
+            <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
+                <a href="#" class="pure-menu-link">Yahoo</a>
+                <ul class="pure-menu-children">
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Foo</a></li>
+                    <li class="pure-menu-separator"></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Bar</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/react">Baz</a></li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+
+
     <h1>div.pure-menu.pure-menu-horizontal.pure-menu-scrollable</h1>
     <div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
         <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
@@ -262,7 +288,7 @@ <h1>div.pure-menu.pure-menu-horizontal, with nested children, customized</h1>
             <li class="pure-menu-item"><a href="#" class="link-custom pure-menu-link">Twitter</a></li>
         </ul>
     </div>
-    <script src="http://10.73.144.35:5000/js/menus.js"></script>
+    <!-- script src="http://10.73.144.35:5000/js/menus.js"></script -->
 
 </body>
 </html>