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

您必须将背景应用于<ul>，而不是<li>'s。给它一个最小高度以查看完整的 bg 图像并且不要使用带有负填充的元素样式。

#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 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;
}
*/

会出现的另一个问题是，因为您的子菜单与主菜单的样式相同，所以它会得到黑色/灰色框。为了避免这种情况，您应该使样式更加具体，这样样式就不会向下渗透。您可以使用子运算符来执行此操作

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 0 · Accepted Answer

您是否尝试将背景设置为 UL 级别？然后是李的背景：透明？您还可以将 UL 背景设置为封面，例如http://css-tricks.com/perfect-full-page-background-image/？

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