css - 相对于 parent 的 parent 的位置

Question

我有一个类似这样的 CSS 菜单...

<ul>
    <li><img src="...">Menu item</li>
    <li><img src="...">Menu item2</li>
</ul>

我的 CSS 目前给了我这个...

我想要的是这样的......

我已尝试将 CSS 缩减为相关部分 - 如果我遗漏了任何重要内容，请告诉我...

ul#menu li ul li {
    position: relative;
    display: block;
    background-color: #fff;
    border-top: solid 1px #808080;
}

ul#menu li ul li:first-child {
    border-top: none;
}

ul#menu li ul li img {
    position: relative;
    left: 0px;
}

问题在于该图像是 <li> 的子图像这不是 <ul> 的全宽，所以position: relative; left: 0px;涉及li不是ul .

如何相对于 ul 定位图像？

Answer 1

由于这些图像实际上并不是内容的一部分，因此请从 html 中删除 img 元素并向 CSS 添加一行:

ul#menu li ul li {
  background: url(/Content/images/nav/Left.png) 5px center no-repeat;
}

这会将箭头设置为背景图像，该背景图像始终距左边缘 5 像素并自动居中，即使菜单项跨越两行(如其中一些菜单项那样)。