title: overflow-y for ul, scroll down the list
body: <p>I have a problem with my menu. I only want four menu items to appear at any time, meaning that if there’s an overflow, it’ll be clipped, and the user will have to scroll down.</p>
  
  <p>I tried setting <code>overflow-y</code>, hoping to see it get clipped, but instead, a horizontal scroll bar appears.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/screen.css' type="text/css" media="screen, projection" /&gt; 
  &lt;link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/print.css' type="text/css" media="print" /&gt; 
  
  &lt;div class="container"&gt;
  &lt;div id="menu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" id="profile"&gt;profile&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#!profile/overview.html" id="overview"&gt;overview&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="partners"&gt;partners&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#!profile/partners/lim.html" id="lim"&gt;Lim Hong Lian&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#!profile/partners/teo.html" id="teo"&gt;Teo Su Seam&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#!profile/partners/marina.html" id="marina"&gt;Marina Baracs&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="associates"&gt;associates&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#!profile/associates/yang.html" id="yang"&gt;Jocelyn Yang Liwan&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#!profile/associates/tsai.html" id="tsai"&gt;Tsai Ming Ming&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#!profile/team.html" id="team"&gt;team&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;projects&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;featured projects&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;HELLO&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;project list&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;current&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#!project/current/all"&gt;all&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#!project/current/urban"&gt;urban&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#!project/current/resort"&gt;resort&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#!project/current/spa"&gt;spa&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#!project/current/restaurant"&gt;restaurant&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#!project/current/restaurant"&gt;others&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;completed&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;publications&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;books&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;magazines&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;contacts&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="contact_singapore.html"&gt;Singapore&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact_milan.html"&gt;Milan&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact_beijing.html"&gt;Beijing&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#menu ul
  {
  list-style-type:none;
  position:absolute;
  padding: 5px 0px;
  margin:0px;
  width:100px;
  }
  
  #menu
  {
  position:relative;
  border-top-color:#afafaf;
  border-top-style:solid;
  border-top-width: thin;
  font-size: 11px;
  margin-top:5px;
  height:80px;
  }
  
  #menu ul ul
  {
  display:none;
  position:absolute;
  padding:5px 0px;
  left:150px;
  top:0px;
  height:80px;
  }
  </code></pre>
  
  <h2>Javascript (jQuery)</h2>
  
  <pre><code>$(document).ready(function(){
  
      $('#menu ul li a').click(function(){
          if(!$(this).hasClass('current'))
          {
              var relatives = $(this).parent().siblings();
              relatives.find('ul').css('left',150).hide();
              relatives.find('.current').removeClass('current');
              $(this).siblings().animate({'left':'-=20', 'opacity':'toggle'},'slow');
              $(this).addClass('current');
              if($(this).attr("href") != "#"){
              var url = $(this).attr("href").split('#!')[1];
              $('#content').slideUp('slow', function(){$(this).load(url, function(){$(this).slideDown('slow')});})
              window.location = base_url+url;
          }
          }
  
          $(this).parent().siblings().find('.black').removeClass('black');
          $(this).addClass('black');
  
          return false;
      });
  })
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3dmQH/3/" rel="nofollow noreferrer">Demo on JS Fiddle</a>.</p>
  
  <p>Here is a screenshot: I only want “all”, “urban”, “resort”, and “spa” to appear initially.</p>
  
  <p><img src="https://i.stack.imgur.com/WDPRI.png" alt="Screenshot of menu"></p>