Last active
October 11, 2021 08:43
-
-
Save kosinix/7348780 to your computer and use it in GitHub Desktop.
WordPress basic CSS for styling nav menus with wp_page_menu taken into account. Supports sub-menus as dropdowns.
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
| <?php | |
| // Somewhere in your header.php add this. container_class and menu_class should match the CSS main class. | |
| wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'nav-menu', 'menu_class' => 'nav-menu' ) ); |
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
| div.nav-menu ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| div.nav-menu li { | |
| position: relative; | |
| line-height: 1.7; | |
| } | |
| div.nav-menu a { | |
| color: #fff; | |
| text-decoration: none; | |
| display: block; | |
| } | |
| div.nav-menu > ul > li { | |
| float: left; | |
| } | |
| div.nav-menu > ul > li > a{ | |
| padding: 10px 10px; | |
| } | |
| div.nav-menu > ul > li:hover > a{ | |
| background: #333; | |
| } | |
| /* Sub/Children Menu */ | |
| div.nav-menu .sub-menu, | |
| div.nav-menu .children { | |
| position: absolute; | |
| left: 0; | |
| top: 100%; | |
| z-index: 1; | |
| background: #333; | |
| min-width: 200px; | |
| display: none; | |
| } | |
| div.nav-menu li:hover > .sub-menu, | |
| div.nav-menu li:hover > .children { | |
| display: block; | |
| } | |
| div.nav-menu .sub-menu a, | |
| div.nav-menu .children a { | |
| padding: 5px 10px; | |
| } | |
| div.nav-menu .sub-menu li:hover a, | |
| div.nav-menu .children li:hover a { | |
| background: #444; | |
| } | |
| /* Grandchildren Menu */ | |
| div.nav-menu .sub-menu .sub-menu, | |
| div.nav-menu .children .children { | |
| position: absolute; | |
| left: 100%; | |
| top: 0; | |
| background: #444; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you set the items border-radius, there is a visual bug when the mouse hover on/off.
to solve this problem: