CODEWITHSUNDEEP
csscss-position
Basic
Basic

Reputation: 26756

Position relative to a parent's parent

I've got a CSS menu something like this...

<ul>
    <li><img src="...">Menu item</li>
    <li><img src="...">Menu item2</li>
</ul>

My CSS currently gives me this...

enter image description here

What I want is something like this...

enter image description here

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?

Upvotes: 2

Views: 2626

Answers (3)

stuajc
stuajc

Reputation: 261

Since these images are not actually part of the content, remove the img elements from the html and add one line to your CSS:

ul#menu li ul li {
  background: url(/Content/images/nav/Left.png) 5px center no-repeat;
}

This will set the arrow as a background image that is always 5px from the left edge and automatically centered, even if the menu item spans two lines, as a couple of them do.

Upvotes: 3

iRector
iRector

Reputation: 1984

Set your ul#menu li ul li width to 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;
}

Then set the img as absolute

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

Upvotes: 1

VenomVendor
VenomVendor

Reputation: 15382

One simple solution

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

Upvotes: 1

Related Questions