html - Making sub navigation show on Skeleton Wordpress theme -
trying add sub menu items navigation correct html on navigation, sub menu doesn't show.
it's using skeleton wordpress theme , header manually updated , when required needing add sub menu.
html:
<div id="navigation" > <div class="menu container"> <ul class="row sixteen columns"> <li class="page_item menu-home"><a href="/">home</a></li> <li class="page_item page-item-56"><a href="/about">about</a></li> <ul class="sub-menu"> <li class="page_item page-item-10"><a href="/volunteer">volunteer</a></li> </ul> <li class="page_item page-item-4"><a href="schedule">schedule</a></li> <li class="page_item page-item-3"><a href="shows">shows</a></li> <li class="page_item page-item-4663"><a href="podcasts">podcasts</a></li> <li class="page_item page-item-12"><a href="features">features</a></li> <li class="page_item page-item-13"><a href="events">events</a></li> <li class="page_item page-item-8"><a href="contacts">contact</a></li> <li class=""><a href="/voices">voices</a></li> </ul> </div> </div> css:
/* @group navigation bar */ #navigation { width: 100%; background: #1b7a9d; background: rgba(3, 68, 91, 0.5); position: relative; border: none; -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); font-family: 'coustard', 'georgia', serif; } #navigation ul li { position: relative; border: none; } #navigation ul li { background-image: none; padding: 15px 20px /* 21px */; text-decoration: none; display: block; font-weight: normal; color: #ffffff; border: none; } /* navbar hover links */ #navigation ul li:hover a, #navigation ul li a:hover { background: rgba(255, 255, 255, 0.2); position: relative; } #navigation ul li:hover li { color: #595959; font-weight: normal; } /* navbar active links */ #navigation ul li.active { color: #333; background: #fff; } /* nav sublevel */ #navigation ul.sub-menu { background: -moz-linear-gradient(270deg, #fcfcfc, #ececec) repeat scroll 0 0 transparent; background: -webkit-linear-gradient(270deg, #fcfcfc, #ececec) repeat scroll 0 0 transparent; border-color: #eaeaea #f5f5f5 #f5f5f5 #f5f5f5; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } #navigation ul.sub-menu li { border: none; } /* nav sublevel links */ #navigation ul.sub-menu li { background: #f0f0f0; padding: 5px 0px 5px 8px; height: 32px; line-height: 32px; border-radius: 0; min-width: 210px; border-bottom: none; position: static; behavior: none; } /* nav sublevel hover */ #navigation ul.sub-menu li a:hover { background: #fff; border-bottom: none; } /* @end */
your sub menu has sub of li
<ul> <li>item</li> <li>item <ul> <li>subitem</li> </ul> </li> </ul> or using code
<div id="navigation" > <div class="menu container"> <ul class="row sixteen columns"> <li class="page_item menu-home"><a href="/">home</a></li> <li class="page_item page-item-56"><a href="/about">about</a> <ul class="sub-menu"> <li class="page_item page-item-10"><a href="/volunteer">volunteer</a></li> </ul></li> <li class="page_item page-item-4"><a href="schedule">schedule</a></li> <li class="page_item page-item-3"><a href="shows">shows</a></li> <li class="page_item page-item-4663"><a href="podcasts">podcasts</a></li> <li class="page_item page-item-12"><a href="features">features</a></li> <li class="page_item page-item-13"><a href="events">events</a></li> <li class="page_item page-item-8"><a href="contacts">contact</a></li> <li class=""><a href="/voices">voices</a></li> </ul> </div> </div> 
Comments
Post a Comment