「水坑」Z-Blog 簡単な二次ナビゲーションメニュー CSS

歴史的な理由から、Z-Blog のナビゲーションやリンク管理はかなり複雑です。将来的にはシステムレベルでの変更が予定されていますが、現時点では移行のためにプラグインの使用をお勧めします：

リンクモジュール管理 - Z-Blog アプリセンター：

https://app.zblogcn.com/?id=1873

プラグインは現在、二次ナビゲーションをサポートしていますが、フロントエンドの効果はテーマによって適応する必要があります。

以下のコードはdefaultテーマに適用され、この記事が公開されてから間もなく直接組み込まれる予定です。

#divNavBar li {
  position: relative;
}
#divNavBar li ul {
  display: none;
  position: absolute;
  left: 0;
  white-space: nowrap;
  /* ↓↓ 通常は#divNavBarの高さと同じに設定します */
  top: 36px;
  /* ↓↓ 背景色は実際のものに合わせます */
  background-color: #297bc4;
}
#divNavBar li:hover ul {
  display: block;
}

レスポンシブテーマの場合は、モバイルサイトの効果も考慮する必要があります。

Bootstrap などのフロントエンドフレームワークを使用して構築されたテーマでは、ナビゲーションコンポーネントを使用することもできます。リンク管理プラグインはカスタムテンプレートをサポートしており、必要な HTML 構造を直接生成することができます。ul->li>(a+ul>li>a) の形式に限定されません。