这很可能是2012年的默认行为；响应小屏幕，从而在页面上堆叠元素，包括导航的内容，#site-navigation.

让我们看看默认TT主题中的nav部分：

<nav id="site-navigation" class="main-navigation" role="navigation">
  <h3 class="menu-toggle">Menu</h3>
    <a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
    <div class="nav-menu">
       <ul class="nav-menu">

         <!-- More stuff below: li items, closing /ul, /div /nav tags-->

基本上，遵循mobile first设计理念，TT默认隐藏ul.nav-menu （显示：无）。通过使用媒体查询，它使最小宽度为600px的屏幕可见。通过jQuery点击.menu-toggle 它添加了一个额外的.toggled-on 到ul.nav-menu 使其可见。

 // TT style.css lines 597 to 604
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
   display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
   display: inline-block;
}

// 1421
@media screen and (min-width: 600px) {

    .main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    display: inline-block !important;
    text-align: left;
    width: 100%;
}

在childtheme中，您已覆盖默认值display: none 的样式.nav-menu 因此，它在所有屏幕大小都可见。

对于一个简单的修复，我会尝试这样做：

// Basically adding a media query to float your menu li elements when small screen using TT\'s breakpoint for small screens of 600px 
@media screen and (max-width: 599px) {
   .main-navigation li {
      float: left
   }
   ul.children {
      //hide the secondary links from displaying
      display:none;
   }
}