css - Position relative to a parent's parent -
i've got css menu this...
<ul> <li><img src="...">menu item</li> <li><img src="...">menu item2</li> </ul>
my css gives me this...
what want this...
i've tried trim down css relevant bits - let me know if i've omitted crucial...
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; }
the problem image child of <li>
not full width of <ul>
, position: relative; left: 0px;
relates li
not ul
.
how can position image relative ul
?
since these images not part of content, remove img
elements html , add 1 line css:
ul#menu li ul li { background: url(/content/images/nav/left.png) 5px center no-repeat; }
this set arrow background image 5px left edge , automatically centered, if menu item spans 2 lines, couple of them do.