レスポンシブデザインのメニューについて

以前既存のサイトをレスポンシブ化する際のメニューについてslicknavというのを紹介した。しかしこれは適さないという向きもあるだろう。
既存の横メニューを２段や１段に表示させたいという場合があるかもしれない。
その場合の技を書いてみる。
いろんなやり方があるだろうが、ポイントはメディアクエリー内でfloatが効かないということとここでもスマホデフォルトで考えるということだ。
具体的に言おう。
普通横メニューはlistを使って、それを左からfloatさせ、メニューの数によってwidthを％で決める。
スマホデフォルトということはfloatを止めて、widthを100%近くにすれば縦にメニューが並ぶ形になる。
しかし、こうするとＰＣ表示の時に改めてfloatさせなければならなくなる。しかし、メディアクエリー内でfloatが効かない。
どうするか。
スマホデフォルトでfloatをそのままにしておいて、widthを100%近くにすればいいのだ。そしてメディアクエリー内で%を変えてやればいい。
例えばメニューが４個だとすれば、50%に近ければ2段になり、25%に近くすれば1段になる。
これが簡単な方法だということに今更気付いたので。