Положение относительно родителя родителя

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

Поскольку эти изображения не являются фактически частью содержимое, удалите t он img элементы из HTML и добавить одну строку в 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; 
}