Css 背景图像溢出

我正在尝试做如下事情：

ul {
    background-color: 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>

ul{
背景色：白色；
边界半径：5px 5px 5px；
显示：块；
边缘顶部：16px；
填充：10px；
位置：绝对位置；
顶部：25px；
z指数：1000；
背景图片：url（arrow.png）；
背景位置：-10px-10px；
}

一,
二,

---

现在我的问题是，我无法让箭头从圆形的白色框中伸出。类似于工具提示的东西。我不想使用额外的div或其他元素。有可能吗？

您可以使用javascript实现这一点，使用jQuery“wrap”在li标记周围添加额外的div可能是最简单的方法，然后您可以使用css对其进行样式设置。

我管理的最好方法是：

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

---

这怎么不使用额外的元素呢？额外的元素不必在列表中硬编码，如果列表是手动输入的，或者即使它是从数据库中提取并使用例如PHP生成的，这将非常有用。样式和内容仍然是分开的，虽然呈现的页面中存在额外的元素，但它们是在浏览器中生成的，不必直接放入内容中。因此“不使用额外元素”。