ブログ練習帳ブログ練習帳かけだしWebデザイナー見習のボロボロブログホームブログ練習帳についてわたしのサイト見習い奮闘記くつろぐ、たびログ新しい記事お問い合わせHTMLとCSSのコードマウスオーバーしたら、タブの高さが上へ伸びるナビゲーションを作るネガティブマージンを使って、マウスオーバーしたときに、タブが上へぐぐっと伸びるのをCSSコントロールのみで作ってみました。考え方としては、こんなかんじ。高さ90pxの一枚の背景画像を使います。いつも見えているのは、この画像の上から30pxの部分まで。マウスオーバーすると、この画像の上から90pxのところまで見えるようになる。いうことで、まず最初aの状態では、heightを30pxにします。a:hoverの状態になったときには、heightを90pxにします。一枚の画像を両方で使うので、大きい画像を準備して、上から表示させるため、background-positionをtopにしておきます。このままだと、マウスオーバーしたときに、naviのエリアが下へぴょこぴょこと広がってしまいます。この「伸び」方向を上にしたいです。そこでネガティブマージンの出番。マウスオーバーしたときの状態から考えてみます。a:hoverの要素は高さが90pxですが、そのうち、60pxはネガティブマージンを使って、上へはみ出させます。マウスオーバーしていない通常状態では、高さ30pxなので、マージンを0にしておく。いうことで、a{margin-top:0;}a:hover{margin-top:-60px;}とやってみたのですが、うまくいきません。タブが上へ伸びているようですが、伸びた部分は、上の要素headerの下へもぐりこんでしまいました。いうことで、naviというdivの要素ごと、ネガティブマージンで上へ押し上げてみました。a{background-image:url(img/happy/no6.gif);}a:hover{height:90px;/*マウスオーバーした時に見せる画像の高さ*/position:relative;margin-top:0;/*aで設定したマージントップを0に戻す*/}どうかしらん。