ウェブサイトの右上に下図のようなサブメニューをよく見かけます。企業サイト等は特にサイトマップ等のメニューを配置している例が多いです。
これをやろうとすると、まずヘッダーにdivで段組みしてfloatで並べるという手を思いつくのですが、これはめんどくさいしコード的にも美しくないです。じゃあどうするかというと、下記のような方法を取る事にします。
- サブメニューを相対配置（position:relative）で配置する。
floatなどを使わずに直接動かしちゃいましょうと。しかし、ここで問題にぶち当たる事になります。
IEでは問題ありませんが、Firefoxでは相対配置で右に動かした分だけ横スクロールが出てしまうのです。大変悩まされましたが、下記で解決できました。
overflow-x: hidden;
ちょっと待って、overflow-x ってIEの独自仕様じゃないんですか？と思って調べてみると、どうやら「overflow-x/y」はCSS3の草案に上がっており標準化される見込みだとか。Firefox・その他モダンブラウザはCSS3として解釈しているようです。
追記
動かすボックスに width 指定するだけで大丈夫でした。
タグ: CSS_Tips
