メニューの折り畳み階層化について

https://templated.co/ion
上記リンクのテンプレートのトップにあるレスポンシブメニューですが、通常の<ul><li>タグでのメニューの階層化がうまくできなかったのですが、なにか違った方法があるのでしょうか？

質問者からの補足コメント

• 横サイズを狭めたときにハンバーガーメニューではサブメニューとして表示されますが、横幅が大きい通常のメニューでは添付画像の様にサブメニューにしたものたちが下にずれて表示されてしまいます。

  
    補足日時：2020/11/18 16:39

• 横サイズを狭めたときにハンバーガーメニューではサブメニューとして表示されますが、横幅が大きい通常のメニューでは添付画像の様にサブメニューにしたものたちが下にずれて表示されてしまいます。

  
  No.1の回答に寄せられた補足コメントです。 補足日時：2020/11/18 16:40

No.2 ベストアンサー 回答者： fujillin 回答日時： 2020/11/18 17:05

No1です。

どのテンプレートなのかもわかりませんが（私が試しているのは、最初に出てきているもの：どうやら違うもののように思えますが）、横に広げてもかわらないようです。
（添付図は、No1と同じものを横に広げたもの）

まぁ、仮に変わるとしても、表示はされていてレイアウトが乱れる程度ならば、元のテンプレートがそのようなことを想定していないだけだと思います。
CSSを修正するなり追加するなりすることで、対応できるのではないでしょうか？

この回答へのお礼

ありがとうございます。
試行錯誤してみます。

お礼日時：2020/11/18 17:20

No.3 回答者： fujillin 回答日時： 2020/11/18 17:33

No2です。

＞添付画像の様にサブメニューにしたものたちが下にずれて表示されてしまいます。
どの部分が、「追加したサブメニュー」なのか不明ですが、なんとなく横並びになっているような雰囲気が・・・

そもそもですが、<ul><li>形式で追加したのなら、全体が縦並びになるはずだと思いますけれど？
（余分なCSSが影響していないと仮定してですが）
ですので、横並びになっていること自体が不自然に思えますけれど？？
もしも、その部分のCSSを追加しているのなら、そのCSSがレスポンシブになっていないだけというオチではないかと思ったりもしました。

※ 図がよく見えないので、対象部分が違っていたならスルーしてください。

この回答へのお礼

色々とテンプレートのCSSを調べて解決いたしました。
メインのCSSにサブメニューというかドロップダウンメニュー用のコードを追加し、スマホ用CSSにも同様にコードを追加した所、何とか表示されるようになりました。ありがとうございました。

お礼日時：2020/11/24 11:46

No.1 回答者： fujillin 回答日時： 2020/11/18 16:09

こんにちは

＞レスポンシブメニュー
どれのことを指しているのかよくわかりませんが、右上に表示されるいわゆるハンバーガーメニューのことでしょうか？（動作はドロワー風になっていますけれど）

＞メニューの階層化がうまくできなかったのですが
どういう意味かよくわかりませんが、例えば上記の<li></li>内に
　<ul><li>hoge1</li><li>hoge2</li><li>hoge3</li></ul>
を追加すれば、そのまま表示されますけれど…？

意味が違ったらスルーしてください。

この回答へのお礼

コメントありがとうございます。

お礼日時：2020/11/18 16:39