伸縮するメニュー

元ネタ

似たようなことが CSS だけでできそうだと思って書いてみました(アニメーションはしません)。

.menu {
    width: 500px;
}
.menu th {
    width: auto;
    border: black solid 1px;
    background: white;
}
.menu th:hover {
    width: 200px;
}

<table class="menu">
<tr><th>aaa<th>bbb<th>ccc<th>ddd
</table>

手元のブラウザで期待通りに動いたのは Firefox だけでした。IE6 はともかく Opera でうまくいかないのはなんだかなあ。