html - 背景画像を垂直サブメニューに適用する

Question

サブメニューに適用したい画像があります：

ここに画像の説明を入力

それを適用するために css を追加しましたが、機能していません。ここに画像の説明を入力

それ以外のここに画像の説明を入力

サブメニューを左パディング左に配置しようとしました <ul class="sub-menu" style="padding-left: -30px;">が、追加した画像を適用するために機能しません

#menu ul.sub-menu li {
    width: 200px;
    background: no-repeat url(menu.png);
    border-width: 0 1px 1px 1px;
    border-style: solid;
}

しかし、それはうまくいきません。

ここにhtmlがあります

<div id="menu">
    <nav>
        <ul style="padding-left: 0px;">
            <li><a href="#">menu 1</a>

            </li>
            <li><a href="#">menu 2</a>

                <ul class="sub-menu" style="padding-left: -30px;">
                    <li><a href="#">1 submenu</a> 
                    </li>
                    <br/>
                    <li><a href="#">2 submenu</a>

                    </li>
                        <br/>
                    <li><a href="#">3 submenu</a>

                    </li>
                        <br/>
                    <li><a href="#">4 submenu</a>

                    </li>
                        <br/>
                </ul>
            </li>
            <li><a href="#">menu 3</a>

            </li>
            <li><a href="#">menu 4</a>

            </li>
            <li><a href="#">menu 5</a>

            </li>
            <li><a href="#">menu 6</a>

            </li>
            <li><a href="#">menu 7</a>

            </li>
        </ul>
    </nav>
</div>

ここにCSSがあります：

#menu {
    width: 100%;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
    -moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
    box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
    padding-top: 15px;
}
hgroup, main, nav {
    margin-bottom: 30px;
    width: 100%;
    background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(100%, #222222));
    background: -webkit-linear-gradient(top, #353535 0%, #222222 100%);
    background: -o-linear-gradient(top, #353535 0%, #222222 100%);
    background: -ms-linear-gradient(top, #353535 0%, #222222 100%);
    background: linear-gradient(top, #353535 0%, #222222 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#222222', GradientType=0);
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}
nav ul {
    height: 45px;
    margin: 0 auto;
}
nav li {
    float: left;
    list-style-type:none;
}
nav li a {
    display: inline-block;
    width:auto;
    padding: 0 12px;
    height: 45px;
    font: bold 14px'Arial', sans-serif;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 48px;
    text-shadow: 1px 1px 0px #111;
    filter: dropshadow(color=#111, offx=1, offy=1);
    border-left: 1px solid #444;
    border-right: 1px solid #111;
    background-color:#2B2B2B;
}
nav li a:hover {
    background: -moz-linear-gradient(top, #444 0%, #222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444), color-stop(100%, #222));
    background: -webkit-linear-gradient(top, #444 0%, #222 100%);
    background: -o-linear-gradient(top, #444 0%, #222 100%);
    background: -ms-linear-gradient(top, #444 0%, #222 100%);
    background: linear-gradient(top, #444 0%, #222 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#222', GradientType=0);
}
nav li a:active {
    background: #222;
    -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
}
nav li a:active:after {
    content:"";
    display: block;
    width: 100%;
    height: 4px;
    position: relative;
    bottom: 6px;
    background: -moz-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5e1f), color-stop(100%, #ff3410));
    background: -webkit-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
    background: -o-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
    background: -ms-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
    background: linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5e1f', endColorstr='#ff3410', GradientType=0);
}
#menu ul.sub-menu {
    display: none;
    position: absolute;
}
#menu ul.sub-menu li {
    width: 200px;
    background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
    border-width: 0 1px 1px 1px;
    border-style: solid;
}
#menu ul.sub-menu li a {
    text-align: center;
    margin: 5px 10px;
    padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
    color: #FFF;
    background-color: #b80063;
}
#menu li:hover ul.sub-menu {
    display: block;
    z-index: 90;
}

ここにjsfiddleがあります

score 1 · Accepted Answer

ここで見つけることができるいくつかの変更を加えました：

http://jsfiddle.net/wWx6f/

LexLusa の回答には正しい考えがありましたが、不完全でしたが、彼/彼女の功績を認めたいと思います。彼が言ったように、スタイルを各liに追加することはできません。そうしないと、背景が各リスト項目に適用されます。

境界線が不要になったため、このブロックも削除する必要があります

/* Removed this because you don't want borders anymore
#menu ul.sub-menu li {
    width: 200px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
}
*/

もう 1 つの問題は、サブメニューがメインメニューと同じスタイルを受け取ったため、黒/灰色のボックスが表示されることでした。これを回避するには、スタイリングをより具体的にして、スタイリングが細流にならないようにする必要があります。これは、子演算子を使用して行うことができます

nav > ul > li > a {

ただし、フォントテキストや行の高さなどのこれらのスタイル設定の一部が必要だったので、単純に追加しました。もっと洗練された解決策があると確信していますが、今のところこれでうまくいきます。他のスタイリングが必要な場合は、ここに追加することもできます。

/* copied stylings from parent */
#menu ul.sub-menu li a {
    font: bold 14px'Arial', sans-serif;
    color: #fff;
    text-decoration: none;
    text-align: center;
    margin: 5px 10px;
    padding: 5px 10px;
    line-height: 48px;
    text-shadow: 1px 1px 0px #111;
    filter: dropshadow(color=#111, offx=1, offy=1);
}

score 1 · Accepted Answer

<ul>背景はではなくに適用する必要があります<li>。完全な bg-image を表示するために min-height を指定し、負のパディングで要素スタイルを使用しないでください。

#menu ul.sub-menu {
    display: none;
    position: absolute;
    background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
    min-height: 264px;
    margin: 0;
    padding: 0;
}

どうぞ：

http://jsfiddle.net/qGX5U/1/

score 0 · Accepted Answer

UL レベルで背景を設定しようとしましたか? 次に、LI の背景: 透明? http://css-tricks.com/perfect-full-page-background-image/のように、UL 背景をカバーとして設定することもできます。

score 0 · Accepted Answer

まずはこれを変更

#menu ul.sub-menu li {
    width: 200px;
    background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
    border-width: 0 1px 1px 1px;
    border-style: solid;
}

に

#menu > ul > li {
    width: 200px;
    background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
    border-width: 0 1px 1px 1px;
    border-style: solid;
}

html - 背景画像を垂直サブメニューに適用する

4 に答える 4

Related

Reference