title: CSS overflow not working in chrome
body: <p>I have a "mega menu" that contains a .png that's supposed to hide after the user mouses off the menu. It works as expected in IE but not Chrome - it leaves the areas of the picture that hang out past the menu. </p>
  
  <p><strong>As per Sparkys suggestion, here's the</strong> <a href="http://jsfiddle.net/T5NGD/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Here's a link to my development folder:</p>
  
  <p><a href="http://libertyeaglearms.com/dev/" rel="nofollow noreferrer">http://libertyeaglearms.com/dev/</a></p>
  
  <p>here's a direct link to my css:</p>
  
  <p><a href="http://libertyeaglearms.com/dev/assets/menu.css" rel="nofollow noreferrer">http://libertyeaglearms.com/dev/assets/menu.css</a></p>
  
  <p>I think i t might have to do with line 6</p>
  
  <pre><code>.megaCreator a img{ 
    display:block;
    position:absolute;
    bottom:-50px;
    right:-50px;
    max-width:550px;
    outline:none;
    border:none;
    background:none; 
  }
  </code></pre>
  
  <p>but, I'm not sure.</p>
  
  <p>If I need to post the code directly here I will, I'm not sure exactly where the problem lies so viewing all the css via the actual sheet, I feel ,would be better.</p>
  
  <p>Here's a couple of screen shots showing the issue:</p>
  
  <p><strong>Here's the mouse over:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/0Tgdk.jpg" alt="enter image description here"></p>
  
  <p><strong>Here's the mouse out:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/CmwOa.jpg" alt="enter image description here"></p>
  
  <p>NOTE: I'm not using any javascript for the menu, in case the question comes up!</p>
  
  <p>Thanks :)</p>
  
  <p><strong>HERE'S THE WORKING CODE</strong> -> <a href="http://jsfiddle.net/6hWtN/" rel="nofollow noreferrer">JS FIDDLE</a></p>