Skip to content

Instantly share code, notes, and snippets.

@manishsongirkar
Created April 5, 2012 08:42
Show Gist options
  • Save manishsongirkar/2309239 to your computer and use it in GitHub Desktop.
Save manishsongirkar/2309239 to your computer and use it in GitHub Desktop.
Vertical Dropdown Menu in Wordpress
/* Navigation */
#rt-nav-menu { font-family: 'Droid Sans',sans-serif;height: 100%;list-style: none outside none;margin: 0;padding-top: 0;position: relative;width: 100%; }
#rt-nav-menu li { border-right: 1px solid #BDC59E;float: left;height: 34px;line-height: 150%;list-style: none outside none;padding: 1px 0 0; }
#rt-nav-menu li a { background: url("img/current-menu-notch.jpg") no-repeat scroll right top transparent;color: #333333;display: block;font-size: 14px;font-variant: normal;font-weight: 700;padding: 0 25px 15px 9px;text-decoration: none;text-transform: uppercase; }
#rt-nav-menu li a:hover { background-position: right -95px;border-bottom: 3px solid #74A740;color: #68aa10;padding-bottom: 16px;text-decoration: none; }
#rt-nav-menu li:hover > a { background-position: right -95px;border-bottom: 3px solid #74A740;color: #68aa10;padding-bottom: 16px;text-decoration: none; }
/* Sub Menu Support */
#rt-nav-menu ul { background: none repeat scroll 0 0 #F5FBDE;display: none;border-top: 1px solid #ECF4CD;font-weight: 400;height: 30px;left: 0;margin: 0;padding: 0;position: absolute;top: 35px;width: 100%;z-index: 99; }
#rt-nav-menu ul li { background: url("img/sub-menu-sep.jpg") no-repeat scroll left center transparent;border-right: 0 none;line-height: 30px;padding: 0; }
#rt-nav-menu ul li:first-child {background: none;}
#rt-nav-menu ul a { background: url("img/current-sub-menu.jpg") repeat-x scroll 0 100px transparent;color: #555D36;display: block;float: left;font-size: 12px;font-weight: 400;line-height: 32px;margin: 0 10px;padding: 0;text-decoration: none;text-transform: none;}
#rt-nav-menu ul a:hover { background-position: 0 21px; border: 0;padding: 0;color: #555D36;text-decoration: none; }
#rt-nav-menu ul li:hover > a { background-position: 0 21px;border: 0; padding: 0;color: #555D36;text-decoration: none; }
#rt-nav-menu ul ul { top: 30px; }
/* Display Sub Menu On Mouse Over */
#rt-nav-menu li:hover > ul,
#rt-nav-menu ul li:hover > ul { display: block; z-index: 100; }
/* Current Menu Style */
#rt-nav-menu li.current-menu-ancestor > a,
#rt-nav-menu li.current-menu-item > a,
#rt-nav-menu .current-menu-parent > a { background-position: right -95px;border-bottom: 3px solid #74A740;color: #68aa10;padding-bottom: 16px;text-decoration: none; }
#rt-nav-menu a.current-menu { background-position: right -95px;border-bottom: 3px solid #74A740;color: #68aa10;padding-bottom: 16px;text-decoration: none; }
#rt-nav-menu .current-menu-ancestor > ul,
#rt-nav-menu ul .current-menu-ancestor > ul { display: block; }
#rt-nav-menu li ul li.current-menu-item > a,
#rt-nav-menu li ul li.current_page_item > a
#rt-nav-menu ul .current-menu-ancestor > a,
#rt-nav-menu ul .current-menu-parent > a { background-position: 0 21px;border: 0; padding: 0;color: #555D36;text-decoration: none; }
#rt-nav-menu ul a.current-menu { background-position: 0 21px;border: 0; padding: 0;color: #555D36;text-decoration: none; }
@manishsongirkar
Copy link
Author

Parent ul id should be #rt-nav-menu.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment