Background Image overflow

Am trying to do something like the following:

ul {
    background-color开发者_StackOverflow: white;
    border-radius: 5px 5px 5px 5px;
    display: block;
    margin-top: 16px;
    padding: 10px;
    position: absolute;
    top: 25px;
    z-index: 1000;
    background-image: url(arrow.png);
    background-position: -10px -10px;
}

<ul>
<li>1</li>
<li>2</li>
</ul>

Now my problem is that I cant get the arrow to jut out from the rounded white box. Something like a tooltip. I do not want to use an extra div or other elements. Is it possible?

The best I've managed is this:

ul 
{
    display: block;
    margin-top: 16px;
    padding-left: 10px; /* pad for size of arrow image */
    position: absolute;
    top: 25px;
    z-index: 1000;
    background:url("arrow.png") no-repeat top left;
}

ul li
{
    margin:0; padding:0;
    list-style-type:none;
    background-color:white;
    width:60px; /* fiddle with sizing for box */
}

ul li:first-child
{
    border-radius: 0px 5px 0px 0px;
}

ul li:last-child
{
    border-radius: 0px 0px 5px 5px;
}

You can achieve this with javascript, possibly easiest with jQuery 'wrap' to put extra divs around your li tags which you can then style up with css.