html - 如何为大型垂直滑动门调整 <ul> 元素的背景？

Question

我正在为侧边栏中的导航列表创建一个圆 Angular 框。我遇到的问题是我创建了一个超长的部分透明图像作为滑动门的底部，但无论我将它设置为哪个元素的背景 - 它似乎都不想扩展正确覆盖整个列表，在用作标签背景时在第一个链接处开始和停止。我提供了以下代码:

CSS:

#sidebar{float:left;
        width: 200px;
        text-align: center;
        margin: 0 0 0 0;
        }

    .nav {
    } /*Attempting to display it here leads to evil. As you might expect from the code below*/



    ul.nav {font-family: arial, san serif;

        margin-left:auto;

        margin-right: auto;

        margin-top:0;

        margin-bottom: 0;

        text-align: left ;  

        width: 200px;

        padding: 0;

        height: 1.35em;

        list-style: none;

                background-image:url(headbutt2.png); /*Here, it only exists as background for the first link*/
            background-repeat:none;
        background-position:top;


        }

    #navwid{background-image:url(head2.png); /*This is the extra long image. Here, it does not display at all*/

background-repeat:none;
        background-position:bottom;}



ul.nav li {

    overflow: hidden;

    }



ul.nav a {

    text-align: center;

    font-weight: bold;

    font-size: 1em;

    padding: 0 1em 0 1em;

    height: 1.35em;

    text-decoration: none;

    color: black;

    }

.sidetop {margin:0 auto 0 auto;
    background-image:url(head3.png); /*Caption background. Displays fine with no issues.*/
    background-repeat: no-repeat;
    display:block;
    width:200px;}

HTML:

 <div id=sidebar>
    <div class="navwid">
 <!--Nav widget container-->
        <div class="sidetop">
 <!--Caption-->
        </div>      
        <div class="nav">


            <ul class="nav">

            <li><a href="#" class="nav">Dummylink</a></li>
            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li> 
            <li><a href="#" class="nav">Dummylink</a></li></ul>

        </div> <!--nav end-->


    </div><!--navwid end-->
</div> <!--sidebar end-->

Answer 1

这是因为您在 ul 和所有 li 上都有 nav 类。复制 ul.nav 的 css，并将其中之一更改为 ul li.nav。对于同一个，删除所有背景属性。

(您正在做的是说“将此 css 应用于任何具有类 nav 的 ul 及其具有类 nav 的子项.")