Created
June 20, 2017 06:01
-
-
Save adzimzf/ccb72a48488acdaf2716ab03f8deec31 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <style type="text/css"> | |
| #primary_nav_wrap | |
| { | |
| margin-top:15px; | |
| margin-left:20px; | |
| display:none; | |
| } | |
| #primary_nav_wrap ul | |
| { | |
| list-style:none; | |
| position:relative; | |
| float:left; | |
| margin:0; | |
| padding:0 | |
| } | |
| #primary_nav_wrap ul a | |
| { | |
| display:block; | |
| color:#333; | |
| text-decoration:none; | |
| font-weight:700; | |
| font-size:12px; | |
| line-height:32px; | |
| padding:0 15px; | |
| font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif | |
| } | |
| #primary_nav_wrap ul li | |
| { | |
| position:relative; | |
| float:left; | |
| margin:0; | |
| padding:0 | |
| } | |
| #primary_nav_wrap ul li.current-menu-item | |
| { | |
| background:#ddd | |
| } | |
| #primary_nav_wrap ul li:hover | |
| { | |
| background:#f6f6f6 | |
| } | |
| #primary_nav_wrap ul ul | |
| { | |
| display:none; | |
| position:absolute; | |
| top:100%; | |
| left:0; | |
| background:#fff; | |
| padding:0 | |
| } | |
| #primary_nav_wrap ul ul li | |
| { | |
| float:none; | |
| width:200px | |
| } | |
| #primary_nav_wrap ul ul a | |
| { | |
| line-height:120%; | |
| padding:10px 15px | |
| } | |
| #primary_nav_wrap ul ul ul | |
| { | |
| top:0; | |
| left:100% | |
| } | |
| #primary_nav_wrap ul li:hover > ul | |
| { | |
| display:block | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Simple Pure CSS Drop Down Menu</h1> | |
| <a href="#" id="hum">=</a> | |
| <nav id="primary_nav_wrap"> | |
| <ul> | |
| <li><a href="#">Menu 3</a> | |
| <ul style="display:block"> | |
| <li class="dir"><a href="#">Sub Menu 1</a></li> | |
| <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a> | |
| <ul> | |
| <li><a href="#">Category 1</a></li> | |
| <li><a href="#">Category 2</a></li> | |
| <li><a href="#">Category 3</a></li> | |
| <li><a href="#">Category 4</a></li> | |
| <li><a href="#">Category 5</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Sub Menu 3</a></li> | |
| <li><a href="#">Sub Menu 4</a></li> | |
| <li><a href="#">Sub Menu 5</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </nav> | |
| </body> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| $("#hum").click(function(){ | |
| $("#primary_nav_wrap").css('display', 'block'); | |
| }); | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment