0

次の非長方形のドロップダウン メニューを実装する必要があります。(写真参照)

http://postimg.org/image/fmzro5rfl/

IE8以降で動作する必要があります。マウスオーバーすると、台形の製品アイコン div がそれぞれ強調表示されます。

これを実装するには、イメージ マップ、CSS スプライト、または CSS 変換を使用する必要がありますか?

  • 必要に応じて PNG を使用できます
  • IE8/9 を処理するためだけにヘルパー ライブラリを追加してもかまいません。

ありがとう！

4

1 に答える 1

0

このようなものを試してください - http://jsfiddle.net/ad9Bj/

HTML:

<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

CSS:

div {
    background: orange;
    overflow: hidden;
}
ul li {
    float: left;
    list-style: none;
    margin-right: 20px;
    padding-left:40px;
    padding-right:40px;
    padding-top:5px;
    padding-bottom:5px;
    color: #fff;
}
ul li:hover {
    background: url('http://i.imgur.com/ZV01sGZ.png') no-repeat;
}
于 2013-07-22T10:37:13.960 に答える