Title: Recent update, sub-menu items?
Last modified: August 30, 2016

---

# Recent update, sub-menu items?

 *  Resolved [Puddleglum](https://wordpress.org/support/users/puddleglum/)
 * (@puddleglum)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/)
 * I broke my cardinal rule about not updating themes, but I don’t know if the update
   had anything to do with my problem, or if I caused it some other way.
 * May we know what was altered in the recent update of the theme?
 * I’ve recently lost my sub-menu items (instead of the UL expanding down, just 
   an empty 1/3rd height bar of colour… no text, no additional LIs. I can mouse 
   over and click the bar and be taken to the location of the first sub-menu item.
 * So… any chance the update broke it, or (more likely) did I?

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312614)
 * Could you provide a link to your site so I can take a look directly?
 * Had you made any changes to the styles, either directly in the theme, in a child
   theme, or using a custom CSS plugin? There were indeed some changes to the menu
   in version 1.4, and it’s possible something might have affected you.
 * > May we know what was altered in the recent update of the theme?
 * Sure. I explained in [this post](https://wordpress.org/support/topic/what-was-changed-in-update-version-104?replies=4#post-7129825)
   how to compare two versions of a theme.
 * In your case, you’d be comparing versions 1.3 and 1.4.
 * After following the steps I outlined, you should see the changelog here:
 * [https://themes.trac.wordpress.org/changeset?old_path=%2Fsuperhero%2F1.3&old=40671&new_path=%2Fsuperhero%2F1.4&new=47774&sfp_email=&sfph_mail=](https://themes.trac.wordpress.org/changeset?old_path=%2Fsuperhero%2F1.3&old=40671&new_path=%2Fsuperhero%2F1.4&new=47774&sfp_email=&sfph_mail=)
 * Additions are in green, while deletions are in red.
 *  Thread Starter [Puddleglum](https://wordpress.org/support/users/puddleglum/)
 * (@puddleglum)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312624)
 * Certainly. [http://bcschoolsmh.org/](http://bcschoolsmh.org/)
 * I’ve made changes in the child theme, yes, but not, I think recently (it is of
   course difficult to be certain because I redid the header. I’m coming up with
   nothing looking through the CSS and markup so I’m exploring the upgrade as a 
   possibility.
 * **Here’s my header markup.**
 *     ```
       <div id="page" class="hfeed site">
       	<?php do_action( 'before' ); ?>
       	<div id="masthead-wrap" class="mastheadGradient">
               <header id="masthead" class="site-header" role="banner">
                   <div id="headerWrapper" style="width:100%; overflow:hidden;">
                       <div id="headerLogoWrapper" style="float:left;">
                           <?php
                           $header_image = get_header_image();
                           if ( ! empty( $header_image ) ) { ?>
                               <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                                   <img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
                               </a>
                           <?php } ?>
                           <?php superhero_the_site_logo(); ?>
                       </div>
                       <div id="headerTitleWrapper" style="float:left;margin-top:2em;">
                           <h1 style="clear:none;" class="site-title">
                               <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                           <h2 style="clear:none; font-size:120%;" class="site-description"><?php bloginfo( 'description' ); ?></h2>
                       </div>
                   </div><!-- #headerWrapper -->
                   <nav role="navigation" class="site-navigation main-navigation">
                       <h1 class="assistive-text"><?php _e( 'Menu', 'superhero' ); ?></h1>
                       <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'superhero' ); ?>"><?php _e( 'Skip to content', 'superhero' ); ?></a></div>
                       <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
                   </nav><!-- .site-navigation .main-navigation -->
                   <div class="clearfix"></div>
               </header><!-- #masthead .site-header -->
       	</div><!-- #masthead-wrap -->
       ```
   
 * **Rendered and served to Chrome**
 *     ```
       <div id="masthead-wrap" class="mastheadGradient">
               <header id="masthead" class="site-header" role="banner">
                   <div id="headerWrapper" style="width:100%; overflow:hidden;">
                       <div id="headerLogoWrapper" style="float:left;">
                                                   <a href="http://bcschoolsmh.org/" title="Boone County Schools Mental Health Coalition" rel="home">
                                   <img src="http://bcschoolsmh.org/wp-content/uploads/2015/06/20150630-BCSMHLogo-Header150h.png" class="header-image" width="291" height="150" alt="" />
                               </a>
                                                               </div>
                       <div id="headerTitleWrapper" style="float:left;margin-top:2em;">
                           <h1 style="clear:none;" class="site-title">
                               <a href="http://bcschoolsmh.org/" title="Boone County Schools Mental Health Coalition" rel="home">Boone County Schools Mental Health Coalition</a></h1>
                           <h2 style="clear:none; font-size:120%;" class="site-description">~ Cultivating Social and Emotional Health ~</h2>
                       </div>
                   </div><!-- #headerWrapper -->
                   <nav role="navigation" class="site-navigation main-navigation">
                       <h1 class="assistive-text">Menu</h1>
                       <div class="assistive-text skip-link"><a href="#content" title="Skip to content">Skip to content</a></div>
                       <div class="menu-visitormenu-container"><ul id="menu-visitormenu" class="menu"><li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-97"><a href="http://bcschoolsmh.org/">Home</a></li>
       <li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116"><a href="#">About Us</a>
       <ul class="sub-menu">
       	<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://bcschoolsmh.org/about-bcsmhc/who-we-are/">Who We Are</a></li>
       	<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://bcschoolsmh.org/about-bcsmhc/need-for-services/">Need for Services</a></li>
       	<li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110"><a href="http://bcschoolsmh.org/about-bcsmhc/mission-statement/">Mission Statement</a></li>
       	<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109"><a href="http://bcschoolsmh.org/about-bcsmhc/history/">History</a></li>
       	<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://bcschoolsmh.org/about-bcsmhc/our-approach/">Our Approach</a></li>
       	<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://bcschoolsmh.org/about-bcsmhc/staff/">Staff</a></li>
       </ul>
       </li>
       <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://bcschoolsmh.org/for-educators/">For Schools</a></li>
       <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://bcschoolsmh.org/for-parents/">For Parents</a></li>
       <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://bcschoolsmh.org/mental-health-in-the-news/">In the News</a></li>
       <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://bcschoolsmh.org/contact-us/">Contact Us</a></li>
       </ul></div>            </nav><!-- .site-navigation .main-navigation -->
                   <div class="clearfix"></div>
               </header><!-- #masthead .site-header -->
       	</div><!-- #masthead-wrap -->
       ```
   
 * **Relevant style.css content from child**
 *     ```
       .mastheadGradient
       {
       	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefcea+26,f1da36+100 */
       	background: #fefcea; /* Old browsers */
       	background: -moz-linear-gradient(-45deg,  #fefcea 26%, #f1da36 100%); /* FF3.6+ */
       	background: -webkit-gradient(linear, left top, right bottom, color-stop(26%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
       	background: -webkit-linear-gradient(-45deg,  #fefcea 26%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
       	background: -o-linear-gradient(-45deg,  #fefcea 26%,#f1da36 100%); /* Opera 11.10+ */
       	background: -ms-linear-gradient(-45deg,  #fefcea 26%,#f1da36 100%); /* IE10+ */
       	background: linear-gradient(135deg,  #fefcea 26%,#f1da36 100%); /* W3C */
       	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
       }
   
       #masthead-wrap {
       	-webkit-box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
       	box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
       	position: fixed;
       	top: 0;
       	z-index: 1000;
       	width: 100%;
       }
       .logged-in #masthead-wrap {
       	top: 0 !important;
       }
       .wp-admin .logged-in #masthead-wrap {
       	top: 0 !important;
       }
       #masthead {
       	color: #fff;
       	margin: 25px auto 5px auto;
       	width: 960px;
       	min-height: 50px;
       	overflow: hidden;
       	background:url(/Media/img/BCSMHC-SiteHeaderBackground-WovenLines.png) bottom left no-repeat;
       }
       #masthead hgroup {
       	float: left;
       	clear: none;
       	width: 291px;
       }
       .header-image,
       .site-logo {
       	width: auto;
       	max-height: 150px;
       	margin: 1em 2em .25em 3em;
       }
       .site-title {
       	/*color: #fff;*/
       	color: #21409A;
       	font-size: 1.7em;
       	font-weight: 400;
       	line-height: 1.2em;
       	margin: 0;
       	padding: 0;
       	font-family: "Josefin Sans";
       }
       .site-title a {
       	/*color: #fff;*/
       	color: #21409A;
       	text-decoration: none;
       	font-family: "Josefin Sans";
       }
       .site-title a:hover {
       	color: #21409A;
       }
       .site-description {
       	color: #818181;
       	font-size: .9em;
       }
   
       .main-navigation {
       	float:right;
       	display: block;
       	width: 70%;
       	padding-bottom:2.25px;
       }
       .main-navigation a:visited {
       	color: #ffffff;
       }
   
       .main-navigation ul {
       	list-style: none outside none;
       	margin: 0;
       	padding-right: 0px;
       	text-align: right;
       }
       .main-navigation li {
       	background-color: #4c86af;
       	color: #fff;
       }
       .main-navigation a {
       	padding: 5px 10px 5px 10px;
       	color: #ffffff;
       	font-size: 0.9em;
       }
       .main-navigation ul ul {
       	background-color: #141414;
       	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
       	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
       	display: none;
       	float: left;
       	position: absolute;
       		top: 1.5em;
       		left: 0;
       		z-index: 99999;
       	text-align: left;
       }
       .main-navigation ul ul ul {
       	left: 100%;
       	top: 0;
       }
       .main-navigation ul ul a {
       	width: 175px;
       }
       .main-navigation ul ul li {
       }
       .main-navigation li:hover > a {
       	background-color: #0b507e;
       	color: #fff;
       }
       .main-navigation ul ul :hover > a {}
       .main-navigation ul ul a:hover {}
       .main-navigation ul li:hover > ul {
       	display: block;
       }
       .main-navigation li.current_page_item a,
       .main-navigation li.current-menu-item a {
       }
   
       /******* Small menu ********/
       .menu-toggle {
       	cursor: pointer;
       }
       .main-small-navigation .menu {
       	display: none;
       }
       ```
   
 * **Same content from superhero style… in case I altered**
 *     ```
       #masthead-wrap {
       	background-color: #262626;
       	-webkit-box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
       	box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
       	position: fixed;
       		top: 0;
       		z-index: 1000;
       	width: 100%;
       }
       .logged-in #masthead-wrap {
       	top: 32px;
       }
       .wp-admin .logged-in #masthead-wrap {
       	top: 0;
       }
       #masthead {
       	color: #fff;
       	margin: 25px auto;
       	width: 960px;
       	min-height: 50px;
       }
       #masthead hgroup {
       	float: left;
       	width: 50%;
       }
       .header-image,
       .site-logo {
       	width: auto;
       	max-height: 150px;
       }
       .site-title {
       	color: #fff;
       	font-size: 1.9em;
       	font-weight: 400;
       	line-height: 1.2em;
       	margin: 0;
       	padding: 0;
       }
       .site-title a {
       	color: #fff;
       	text-decoration: none;
       }
       .site-title a:hover {
       	color: #ea5449;
       }
       .site-description {
       	color: #818181;
       	font-size: .9em;
       }
   
       #main {
       	font-size: .8em;
       	line-height: 24px;
       	margin: 25px auto;
       	width: 960px;
       }
       #primary {
       	float: left;
       	margin-right: 25px;
       	width: 695px;
       }
       #primary.full-width-page {
       	float: none;
       	margin-right: 0;
       	width: 100%;
       }
       #secondary {
       	float: right;
       	width: 240px;
       }
       #colophon-wrap {
       	background-color: #262626;
       	clear: both;
       	margin-top: 25px;
       	padding: 25px 0;
       	width: 100%;
       }
   
       #colophon {
       	color: #818181;
       	font-size: .8em;
       	margin: 0 auto;
       	width: 960px;
       }
       #colophon a:hover {
       	color: #fff;
       }
   
       /* =Menu
       ----------------------------------------------- */
   
       .main-navigation {
       	display: block;
       	float: right;
       	width: 50%;
       }
       .main-navigation ul {
       	list-style: none;
       	margin: 0;
       	padding-left: 0;
       	text-align: right;
       }
       .main-navigation li {
       	display: inline-block;
       	position: relative;
       }
       .main-navigation a {
       	color: #818181;
       	display: block;
       	font-size: .8em;
       	padding: 3px 20px;
       	text-decoration: none;
       }
       .main-navigation ul ul {
       	background-color: #141414;
       	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
       	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
       	display: none;
       	float: left;
       	position: absolute;
       		top: 1.5em;
       		left: 0;
       		z-index: 99999;
       	text-align: left;
       }
       .main-navigation ul ul ul {
       	left: 100%;
       	top: 0;
       }
       .main-navigation ul ul a {
       	width: 175px;
       }
       .main-navigation ul ul li {
       }
       .main-navigation li:hover > a {
       	background-color: #ea5449;
       	color: #fff;
       }
       .main-navigation ul ul :hover > a {
       }
       .main-navigation ul ul a:hover {
       }
       .main-navigation ul li:hover > ul,
       .main-navigation ul li.focus > ul {
       	display: block;
       }
       .main-navigation li.current_page_item a,
       .main-navigation li.current-menu-item a {
       }
   
       /* Small menu */
       .menu-toggle {
       	cursor: pointer;
       }
       .main-small-navigation .menu {
       	display: none;
       }
   
       .site-content .site-navigation {
       	margin: 0 0 1.5em;
       	overflow: hidden;
       }
       .site-content .nav-previous {
       	float: left;
       	width: 50%;
       }
       .site-content .nav-next {
       	float: right;
       	text-align: right;
       	width: 50%;
       }
       ```
   
 *  Thread Starter [Puddleglum](https://wordpress.org/support/users/puddleglum/)
 * (@puddleglum)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312627)
 * If I’m reading the changelog correctly, the only style change applicable was 
   the adding of the .focus class (is it supposed to be a class and not a pseudoclass?)
 *     ```
       .main-navigation ul li:hover > ul,
       .main-navigation ul li.focus > ul {
           display: block;
       }
       ```
   
 * and perhaps changes to small-menu.js (?).
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312629)
 * Looks like the culprit is some of the CSS in your child theme’s stylesheet. If
   you remove the child’s styles using a browser inspector, the dropdown menus work
   correctly again, as you can see here:
 * [⌊Boone County Schools Mental Health Coalition Cultivating Social and Emotional
   Health⌉⌊Boone County Schools Mental Health Coalition Cultivating Social and Emotional
   Health⌉[
 * To troubleshoot backwards from there, you can add your child-theme styles back
   bit by bit to find the specific problematic bit. I’d suggest you focus on your
   menu styles first.
 *     ```
       .main-navigation ul li.focus > ul
       ```
   
 * That’s a good catch, I suspect it’s an error and will pass it along to our developers.
 *  Thread Starter [Puddleglum](https://wordpress.org/support/users/puddleglum/)
 * (@puddleglum)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312630)
 * Thank you! I never thought to troubleshoot that way. The culprit was my adding
   an oversized (300px high) graphic as a background image to a div that is not 
   nearly so tall and adding overflow:hidden; thinking that the background might
   expand the div height (it does not).
 *     ```
       #masthead {
       	color: #fff;
       	margin: 25px auto 5px auto;
       	width: 960px;
       	min-height: 50px;
       	/*overflow: hidden;*/
       	background:url(/Media/img/BCSMHC-SiteHeaderBackground-WovenLines.png) bottom left no-repeat;
       }
       ```
   
 * Thank you so much! What fantastic customer service!
 *  Thread Starter [Puddleglum](https://wordpress.org/support/users/puddleglum/)
 * (@puddleglum)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312631)
 * And for a non-paid-for theme no less. Much much much obliged! I was going quite
   mad.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312632)
 * Wonderful! I’m glad you got it all fixed up. Looking good now!
 * And you’re very welcome. 🙂
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312680)
 * Just wanted to let you know that I showed the `.main-navigation ul li.focus >
   ul` line to our developers and it turns out the `li.focus` bit is actually correct.
 * > The theme has some JavaScript that makes the dropdowns in the menu usable on
   > touchscreens (in the file /js/small-menu.js, starting on line 43). The JavaScript
   > checks if the site is currently loaded on a touch screen device. If yes, will
   > add/remove the class ‘focus’ when an item is tapped in the menu, so the dropdown
   > can be shown/hidden.
 * Hope this helps explain it a bit!
 *  Thread Starter [Puddleglum](https://wordpress.org/support/users/puddleglum/)
 * (@puddleglum)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312687)
 * Nifty. Thanks much.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Recent update, sub-menu items?’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/superhero/1.4/screenshot.png)
 * Superhero
 * [Support Threads](https://wordpress.org/support/theme/superhero/)
 * [Active Topics](https://wordpress.org/support/theme/superhero/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/superhero/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/superhero/reviews/)

## Tags

 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [nav](https://wordpress.org/support/topic-tag/nav/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)
 * [sub menus](https://wordpress.org/support/topic-tag/sub-menus/)

 * 9 replies
 * 2 participants
 * Last reply from: [Puddleglum](https://wordpress.org/support/users/puddleglum/)
 * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/recent-update-sub-menu-items/#post-6312687)
 * Status: resolved