Question

我有一个想要应用于子菜单的图像：

enter image description here

我已经添加了css来应用它但是没有工作，我怎样才能实现类似的东西？： enter image description here

而不是 enter image description here

我试图将子菜单放到左侧填充左<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;
}

HERE IS jsfiddle

Answer 1

您必须将背景应用于<ul>，而不是<li>。 Givbe它是一个最小高度，可以看到完整的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/

Answer 2

您可以在此处进行一些更改：

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 {

然而，你仍然想要一些这样的样式，如字体文本和lineheight，所以我只是添加它们。我敢肯定有一个更优雅的解决方案，但现在这是有效的。如果你想要其他款式，你也可以在这里添加它。

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

Answer 3

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

Answer 4

首先改变这个

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

将背景图像应用于垂直子菜单

4 个答案: