親要素の幅に依存しないドロップダウンメニュー

ul > li > ul のリストを作る場合、子階層のメニューが親のliよりも幅が大きくなりません。
子要素のulに一行追加するだけで、親のliよりも幅を広げられます。

実装方法

width: max-content か white-space: nowrap のどちらかを指定します。

max-contentは中の要素の幅にする指定方法。IEでは動きません。
nowrapはテキストを折り返さない指定。

ul {
  ul {
    /* どちらかをつける */
    width: max-content;
    white-space: nowrap;
  }
}

どっちでもいいですが、何となく max-content の方が用途としては合ってそう。