Sunday, 18 August 2013

Position relative to a parent's parent

Position relative to a parent's parent

I've got a CSS menu something like this...
Menu item
Menu item2
My CSS currently gives me this...

What I want is something like this...

I've tried to trim down the CSS to the relevant bits - let me know if I've
omitted anything 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 is that the image is a child of the <li> which is not the full
width of the <ul>, so the position: relative; left: 0px; relates to the li
not the ul.
How can I position the image relative to the ul?

No comments:

Post a Comment