a:linlk ＢＯＸの背景に色をつけたい

> しかしリンクがブロック要素になってしまうのですね。。。 この手の、テキストリンクをボタン的に見せる手法では<a>を"display: block;"でブロック要素化するのが大前提です。 インライン要素であった<a>がブロック要素化される事で、リンク領域がテキスト部分だけでなく親要素の幅に合う様になるので。 勿論、 > http://www.boxicon.com/のサイトのように も、その手法です。 > どのようにソースを書けばよいのでしょうか？ 上記サイトのその部分のマークアップとそれに対応するCSSをのぞき見ればすぐわかりますよ。 ですが、 > このやり方以外でご存知の方がいらっしゃれば引き続きお願いします。 と仰っているところを見ると、「リンクがブロック要素に」なる事なしで「ＢＯＸの部分ごと背景色が変わるようにしたい」のですね？ 例えば上記サイトの様なメニュー構成： --------------------------------------------------------------------- <ul class="hoge"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> --------------------------------------------------------------------- であれば、<a>ではなく<li>に疑似要素":hover"を適用する事もできます： --------------------------------------------------------------------- ul.hoge { list-style: none; width: 200px; padding: 0; margin: 0; } ul.hoge li { border: solid 1px #ccc; padding: 3px; margin: 0 0 1px 0; } ul.hoge li:hover { background: #fee; } --------------------------------------------------------------------- こんな感じで。これだと、<a>自体はインライン要素のままなので、リンク領域はテキスト上のみとなりますが、<li>に疑似要素":hover"を適用しているので、<li>にマウスオーバーした際には、<li>全体の背景色が指定した色（ピンク）に変わります。 しかし、困った事にIE6では疑似要素":hover"が<a>以外の要素には効きません。IE7を含めた主要モダン・ブラウザでは問題ないのですが、IE6だけが未実装なのです。なので、IE6にも同様のスタイルを適用する事を視野に入れるのであれば、hackなどを使ってIE6だけ<a>をブロック要素化して"a:hover"で対応する様にするとか、あるいはJavaScriptを導入してIE6でも<a>以外でも疑似要素":hover"が有効になる様にするとか、の対処が必要となってきます。