相对于父母的父母的位置

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

这会将箭头设置为背景图像，该图像始终距左边缘5px并自动居中，即使菜单项跨越两行，也就是其中几行。

Answer 2

一个简单的解决方案

ul#menu li ul li img {
    float: left;
    margin-top: 7px;
}

Answer 3

设置你的 ul#menu li ul li宽度为100%

ul#menu li ul li {
    width: 100%; //Make sure you have a set px width somewhere else in the menu hierarchy
    position: relative;
    display: block;
    background-color: #fff;
    border-top: solid 1px #808080;
}

然后将img设置为absolute

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