title: CSS make li element appear outside of the ul
body: <p>Considering this code:</p>
  
  <pre><code>&lt;div class="menu"&gt;
  &lt;ul&gt;
      &lt;li class="active"&gt;I'm active!&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My .menu div has a 1px black border, and my .active list element has a white background. Now, I want my .active list element to be "outside" of the div, and overlap with the border, hiding it partially with the white background. How is this achievable?</p>
  
  <p>To illustrate what I want;</p>
  
  <p>This is what I have at the moment, coded up;
  <a href="http://i.stack.imgur.com/cVZHt.png" rel="nofollow">http://i.stack.imgur.com/cVZHt.png</a></p>
  
  <p>And this is what it should look like;
  <a href="http://i.stack.imgur.com/gp2k2.png" rel="nofollow">http://i.stack.imgur.com/gp2k2.png</a></p>