How do I adjust the background of the <ul> element for a large vertical sliding door?

I'm creating a rounded box for a nav list in a sidebar. The issue I'm having is that I've created an extra long partially transparent image to act as the bottom of the sliding door, but no matter which element I set it as the background for- it doesn't seem to want to extend properly over the whole list, starting and stopping at the first link when used as the background for the tag. I've provided the code below:

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"&g开发者_StackOverflow中文版t;Dummylink</a></li> 
            <li><a href="#" class="nav">Dummylink</a></li></ul>

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


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

It's because you have the nav class on both the ul and all the lis. Duplicate the css for ul.nav and change one of them to ul li.nav. For the same one, remove all the background attributes.

(What you're doing is saying "Apply this css to any ul with class nav as well as its children with class nav.")

The answer to the question, as I just realized, lies in my setting a height of 1.35em to the ul tag. It was sitting there in front of me the whole time while I spent a few hours bashing away at the keyboard. Just goes to show you can't overlook the small stuff when things get buggy.