ネストされたメニューを使用せずにデータのネストされたカテゴリを表示する方法
シンプルなウェブサイトの制作を担当しました。私はまた、フロントエンドWebデザインに慣れていないだけでなく、一般的なデザインもしています（私は常にバックエンドプログラマーでした）。
私は上司から、特定のデータがどのように構造化され、サイトのメインのナビゲーション/基本的な外観をどのようにしたいかについて従うべき文書を与えられました。以下がそのスクリーンショットです。
カテゴリの最大の深さには限界があることに注意することが重要だと思います。最大3レベルの深さで解決しました（したがって、両方の図に示されているのは、カテゴリが最も深いレベルです）。
tl; drバージョン：最初の図の構造を最もよく反映する、私が従う必要のあるよく考えられたUIデザインパターンはありますか？
私のサイトでの最初の試みはあまり受け入れられませんでした。上部のナビゲーションバーでネストされたメニューを使用しました。カテゴリの最後のメニュー項目をクリックすると、表示されるクエリごとにアコーディオンのセットが開きます。メニューは普遍的に嫌われ、アコーディオンもある程度嫌われた。メニューは次のとおりです。
メニューの下に、上部のアコーディオンが開いているのがわかります。
私はUI/UX設計について独自の調査を開始し、ネストされたメニューは設計が悪いと見なされていることを読みました（Bootstrap 3からも削除されました）。インターフェイス設計技術も調査しています。しかし、これまでのところ、最初の画像の構造やネストされたメニューを反映できるものを思いつくことはできませんでした。私は物事のデザインがあまり得意でないと思います（私もあまりうまく描くことができません！） :)
私の質問：ネストされたドロップダウンメニューを使用して、構造化されてWebサイトの最初の画像に表示されているデータを表示しない良い方法は何ですか？
特定のテクニックやhtmlコンポーネントでない場合、私がチェックできる優れたリファレンスがありますか？
前もって感謝します。
ネストされたメニューの主な問題は、UIオブジェクトとしてはやや扱いにくいことです。彼らの仕事は、短時間表示され、ユーザーが選択すると消えるようにすることです。この観点からすると、メニューをマウスで誤って動かすとメニューが消える傾向があるため、多層メニューを選択するようユーザーに要求するのは大変な作業です。
ネストされたメニューをより静的にするのがより良いオプションだと思います。たとえば、モックアップに表示されるように、ユーザーはメニューから第1レベルのカテゴリを選択できます。これにより、ツリーのような構造またはドリルダウンリンクとブレッドクラムを使用して、他のトピックにさらに移動できるページが開きます。親トピックのデータがある場合は、ページの中央に表示し、左側にナビゲーションを表示できます。そんな感じ： - 