2

私は次のようなものを作成しようとしています：

落ちる

問題は、ドロップダウンには内側の影とドロップシャドウがあるため、1つのdiv内に保持するのが最善だと思います。

よろしくお願いいたします。問題の詳細が必要な場合はお知らせください。

これは私がこれまでに持っているものです：

CSS

.rectangle {
    background: #1f8dda;
    background-image: -moz-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -webkit-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -o-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: linear-gradient(180deg, #1f8dda 0%, #114dbc 100%);
    -moz-box-shadow: 0px 0px 2px 0px #000000;
    -webkit-box-shadow: 0px 0px 2px 0px #000000;
    -o-box-shadow: 0px 0px 2px 0px #000000;
    box-shadow: 0px 0px 2px 0px #000000;
    border-radius: 0px;
    margin: 0px;
    width: 145px;
    height: 138px;
}

私もこれのためにフィドルを作成しました：http：//jsfiddle.net/yHy5n/

4

1 に答える 1

2

メニュー構造が非常に奇妙に見えるという事実に加えて、ここに私が出発点としてあなたのために作った簡単なスケッチがあります：デモ
これは完全な解決策ではなく、あなたが扱うことができるアイデアを意味します。

以下のマークアップを考えると、基本的な考え方は、メインリスト（h2）とサブリストのリスト要素を別々にスタイル設定し、グラデーションがスムーズに遷移するようにすることです。

<ul class="nav">
    <li>HOME</li>
    <li class="active"><h2>DUNGEONS PIECES</h2>
    <ul class="subnav">
        <li>Floor<span class="count">123</span></li>
        <li>Walls<span class="count">54</span></li>
        <li>Sets<span class="count">7</span></li>
    </ul>
    </li>
</ul>

css：

.active {
    background: #1f8dda;
    /* ... */
}
.active h2{
    background-image: linear-gradient(180deg, #1f8dda 34%, #228fdd 100%);
    /* ...                                                    /\ */
}            /*            gradient transition   --------------- */
.active ul { /*                                  \/              */
    background-image: linear-gradient(180deg, #228fdd 34%, #114dbc 100%);
    /* ... */
}

また、互換性のあるcssのほとんどはもう必要ありません-以下を見てください：

グラデーション
ボックス-シャドウ

于 2013-02-05T15:33:43.370 に答える