階層ジャンプメニュー付きパンくず

<nav class="d03-14-07-bc" aria-label="パンくずリスト">
          <a href="#" onclick="return false">ホーム</a>
          <span class="d03-14-07-sep">›</span>
          <div class="d03-14-07-drop">
            <button type="button" class="d03-14-07-trigger" aria-haspopup="true" aria-expanded="false">サービス <i>▾</i></button>
            <div class="d03-14-07-menu">
              <a href="#" onclick="return false">Web制作</a>
              <a href="#" onclick="return false">SEO対策</a>
              <a href="#" onclick="return false">広告運用</a>
              <a href="#" onclick="return false">保守運用</a>
            </div>
          </div>
          <span class="d03-14-07-sep">›</span>
          <span class="d03-14-07-current">料金プラン</span>
        </nav>

.d03-14-07-bc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px}
        .d03-14-07-bc a{color:#475569;text-decoration:none;font-weight:600}
        .d03-14-07-bc a:hover{color:#2563eb}
        .d03-14-07-sep{color:#94a3b8;font-size:12px}
        .d03-14-07-current{color:#0f172a;font-weight:700}
        .d03-14-07-drop{position:relative;display:inline-block}
        .d03-14-07-trigger{
          border:none;background:none;cursor:pointer;font-family:inherit;
          color:#475569;font-weight:600;font-size:13px;padding:2px 0;
        }
        .d03-14-07-trigger i{font-style:normal;font-size:10px;display:inline-block;transition:transform .25s ease}
        .d03-14-07-drop.open .d03-14-07-trigger i{transform:rotate(180deg)}
        .d03-14-07-drop.open .d03-14-07-trigger{color:#2563eb}
        .d03-14-07-menu{
          position:absolute;top:100%;left:50%;transform:translate(-50%,-6px);margin-top:10px;
          background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 24px rgba(0,0,0,.12);
          padding:8px;display:flex;flex-direction:column;min-width:130px;
          opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:3;
        }
        .d03-14-07-drop.open .d03-14-07-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
        .d03-14-07-menu a{padding:6px 10px;font-size:12px;border-radius:6px;white-space:nowrap}
        .d03-14-07-menu a:hover{background:#eff6ff}

(function(){
        var drop=document.querySelector('.d03-14-07-drop');
        if(!drop)return;
        var btn=drop.querySelector('.d03-14-07-trigger');
        btn.addEventListener('click',function(){
          var open=drop.classList.toggle('open');
          btn.setAttribute('aria-expanded',open?'true':'false');
        });
        document.addEventListener('click',function(e){
          if(!drop.contains(e.target)){
            drop.classList.remove('open');
            btn.setAttribute('aria-expanded','false');
          }
        });
      })();