title: Position relative to a parent's parent
body: <p>I've got a CSS menu something like this...</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;img src="..."&gt;Menu item&lt;/li&gt;
      &lt;li&gt;&lt;img src="..."&gt;Menu item2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My CSS currently gives me this...</p>
  
  <p><img src="https://i.stack.imgur.com/JRCrP.png" alt="enter image description here"></p>
  
  <p>What I want is something like this...</p>
  
  <p><img src="https://i.stack.imgur.com/f8gjw.png" alt="enter image description here"></p>
  
  <p>I've tried to trim down the CSS to the relevant bits - let me know if I've omitted anything crucial...</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The problem is that the image is a child of the <code>&lt;li&gt;</code> which is not the full width of the <code>&lt;ul&gt;</code>, so the <code>position: relative; left: 0px;</code> relates to the <code>li</code> not the <code>ul</code>.</p>
  
  <p>How can I position the image relative to the <code>ul</code>?</p>