第3メニューによる相対的な位置付けの問題

Question

私はこのトピックをかなり調べて、過去にこれを成功裏に達成しました（difプロジェクト）。私の3番目のメニュー（<ul>）が期待通りに表示されません。すなわち、<li>にネストされています.3次メニューはすべて、セカンダリメニューの最初の兄弟<li>に関連して表示されます。私はプライマリメニュー（<ul>）を「相対位置」に設定し、二次および三次を「相対」に設定しています...これは私が探している唯一のアドバイスです。

私は、第三者のメニューを親の下に表示させようとしています<li>。そして、これは異なる幅のブラウザウィンドウ（デスクトップとラップトップ上）に対応できる必要があります...モバイル版では、メニューのdifを処理するいくつかのメディアクエリを実装します。すべて<li>は、これはモバイル版では問題にならないでしょう。

下記のコードとjsfiddleリンク。助けてくれてありがとう、それは非常に感謝しています！

jsFiddle：https://jsfiddle.net/06kLo2aa/1/

CSS：

  body, nav, ul, li, a {margin: 0; padding: 0;} 
     a { 
      text-decoration: none; 
      color: #fff; 
     } 
     nav { 
      background: #005838; 
     } 
     ul { 
      list-style: none; 
     } 
     ul.primary, ul.secondary { 
      padding: 0 10px; 
     } 
     nav ul.primary { 
      position: relative; 
     } 
     li.primary-item, li.secondary-item { 
      display: inline; 
     } 
     nav a { 
      display: inline-block; 
      text-transform: uppercase; 
      color: #fff; 
      font-weight: bold; 
      padding: 0.75rem; 
      margin: 0.5rem 0; 
      font-size: 1.125rem; 
     } 
     nav ul li.primary-item > a:hover { 
      text-decoration: none; 
      background-color: #008050; 
     } 
     nav li.primary-item > a.btn-active { 
      background-color: #008050; 
     } 
     nav ul li.secondary-item > a:hover { 
      text-decoration: none; 
      background-color: #9dcb6b; 
     } 
     nav li.secondary-item > a.btn-active { 
      background-color: #9dcb6b; 
     } 
     nav ul li.tertiary-item > a { 
      display: block; 
     } 
     nav ul li.tertiary-item > a:hover { 
      text-decoration: none; 
      background-color: #769950; 
     } 
     nav ul.secondary { 
      display: none; 
      position: absolute; 
      left: 0; 
      width: 100%; 
      background: #008050; 
     } 
     nav ul.secondary li.secondary-item a { 
      padding: 0.3rem 0.75rem;; 
     } 
     nav ul.tertiary { 
      display: none; 
      position: absolute; 
      z-index: 9999; 
      background: #9dcb6b; 
     } 
     nav ul.tertiary li.tertiary-item { 
      border-bottom: 1px solid #7EA356; 
     }   
     nav ul.tertiary li.tertiary-item a { 
      padding: 0.75rem; 
      margin: 0; 
     } 

HTML：

<nav> 
     <ul class="primary"> 
      <li class="primary-item"> 
       <a href="#">Primary 1</a> 
       <ul class="secondary"> 
        <li class="secondary-item"><a href="#">P1 - Secondary 1</a> 
         <ul class="tertiary"> 
          <li class="tertiary-item"><a href="#">P1 - S1 - Tertiary 1</a></li> 
          <li class="tertiary-item"><a href="#">P1 - S1 - Tertiary 2</a></li> 
         </ul> 
        </li> 
        <li class="secondary-item"><a href="#">P1 - Secondary 2</a> 
         <ul class="tertiary"> 
          <li class="tertiary-item"><a href="#">P1 - S2 - Tertiary 1</a></li> 
          <li class="tertiary-item"><a href="#">P1 - S2 - Tertiary 2</a></li> 
         </ul> 
        </li> 
        <li class="secondary-item"><a href="#">P1 - Secondary 3</a> 
         <ul class="tertiary"> 
          <li class="tertiary-item"><a href="#">P1 - S3 - Tertiary 1</a></li> 
          <li class="tertiary-item"><a href="#">P1 - S3 - Tertiary 2</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="primary-item"> 
       <a href="#">Primary 2</a> 
       <ul class="secondary"> 
        <li class="secondary-item"><a href="#">P2 - Secondary 1</a> 
         <ul class="tertiary"> 
          <li class="tertiary-item"><a href="#">P2 - S1 - Tertiary 1</a></li> 
          <li class="tertiary-item"><a href="#">P2 - S1 - Tertiary 2</a></li> 
         </ul> 
        </li> 
        <li class="secondary-item"><a href="#">P2 - Secondary 2</a> 
         <ul class="tertiary"> 
          <li class="tertiary-item"><a href="#">P2 - S2 - Tertiary 1</a></li> 
          <li class="tertiary-item"><a href="#">P2 - S2 - Tertiary 2</a></li> 
         </ul> 
        </li> 
        <li class="secondary-item"><a href="#">P2 - Secondary 3</a> 
         <ul class="tertiary"> 
          <li class="tertiary-item"><a href="#">P2 - S3 - Tertiary 1</a></li> 
          <li class="tertiary-item"><a href="#">P2 - S3 - Tertiary 2</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </nav> 

のjQuery：

function closeTertiaryMenus() { 
      $('ul.tertiary').each(function(index) { 
       if ($(this).css('display') == 'block') { 
        $(this).hide(); 
       } 
      }); 
     } 
     function removeSecActBtnClr() { 
      $('nav li.secondary-item > a').each(function(index) {   
       $(this).removeClass(); 
      }); 
     } 

     $('nav li.primary-item > a').click(function() { 
      closeTertiaryMenus(); 
      removeSecActBtnClr(); 
     }); 

     $('nav a').click(function() { 
      // show/hide child menu 
      $parent_li = $(this).parent('li'); 
      $parent_li.siblings().find('ul').hide(); 
      $parent_li.children('ul').toggle(); 

      $parent_li.siblings().find('a').removeClass(); 
      $(this).toggleClass('btn-active'); 
     }); 

Answer 1

変更li.secondary-itemからdisplay: inline-block;