title: Prevent block element from overflowing parent element's width
body: <p>I have a menu (<a href="http://jsfiddle.net/F3uCs/" rel="nofollow noreferrer">jsfiddle</a>) which displays like below, it is built from <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> elements.</p>
  
  <p><img src="https://i.stack.imgur.com/AVXGn.png" alt="enter image description here"></p>
  
  <p>The child menu elements show up below the parent element, and the container is a fixed-width <code>&lt;ul&gt;</code>. The problem I have is that for menu element further to the right, this second-level <code>&lt;ul&gt;</code> overflows the parent element's width, like so: </p>
  
  <p><img src="https://i.stack.imgur.com/yHjt1.png" alt="Current state"></p>
  
  <p>How can I make sure that the <strong>submenu</strong> shows up as in the first picture, but for menu elements further right just <strong>moves no further than to the right border</strong>, keeping the size intact, instead of overflowing?</p>
  
  <p><img src="https://i.stack.imgur.com/qooeP.png" alt="enter image description here"></p>