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...

enter image description here

what want this...

enter image description here

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.


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo