overflow-y for ul, scroll down the list

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.

I tried setting overflow-y, hoping to see it get clipped, but instead, a horizontal scroll bar appears.

HTML

<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/screen.css' type="text/css" media="screen, projection" /> 
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/print.css' type="text/css" media="print" /> 

<div class="container">
<div id="menu">
<ul>
<li><a href="#" id="profile">profile</a>
    <ul>
        <li><a href="#!profile/overview.html" id="overview">overview</a></li>
        <li><a href="#" id="partners">partners</a>
            <ul>
                <li><a href="#!profile/partners/lim.html" id="lim">Lim Hong Lian</a></li>
                <li><a href="#!profile/partners/teo.html" id="teo">Teo Su Seam</a></li>
                <li><a href="#!profile/partners/marina.html" id="marina">Marina Baracs</a></li>
            </ul>
        </li>
        <li><a href="#" id="associates">associates</a>
            <ul>
                <li><a href="#!profile/associates/yang.html" id="yang">Jocelyn Yang Liwan</a></li>
                <li><a href="#!profile/associates/tsai.html" id="tsai">Tsai Ming Ming</a></li>
            </ul>
        </li>
        <li><a href="#!profile/team.html" id="team">team</a></li>
    </ul>
</li>
<li><a href="#">projects</a>
    <ul>
        <li><a href="#">featured projects</a>
            <ul>
                <li><a href="#">HELLO</a></li>
            </ul>
        </li>
        <li><a href="#">project list</a>
            <ul>
                <li><a href="#">current</a>
                    <ul>
                        <li><a href="#!project/current/all">all</a></li>
                        <li><a href="#!project/current/urban">urban</a></li>
                        <li><a href="#!project/current/resort">resort</a></li>
                        <li><a href="#!project/current/spa">spa</a></li>
                        <li><a href="#!project/current/restaurant">restaurant</a></li>
                        <li><a href="#!project/current/restaurant">others</a></li>
                    </ul>
                </li>
                <li><a href="#">completed</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">publications</a>
    <ul>
        <li><a href="#">books</a></li>
        <li><a href="#">magazines</a><开发者_JAVA技巧;/li>
    </ul>
</li>
<li><a href="#">contacts</a>
    <ul>
        <li><a href="contact_singapore.html">Singapore</a></li>
        <li><a href="contact_milan.html">Milan</a></li>
        <li><a href="contact_beijing.html">Beijing</a></li>
    </ul>
</li>
</ul>
</div>


</div>

CSS

#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;
}

Javascript (jQuery)

$(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;
    });
})

Demo on JS Fiddle.

Here is a screenshot: I only want “all”, “urban”, “resort”, and “spa” to appear initially.

Not sure you can limit the number of elements, but you can set the height and set the overflow to auto, so if it's higher then specified width there will be a scrollbar.

            <ul class="inner-ul">
                <li><a href="#!project/current/all">all</a></li>
                <li><a href="#!project/current/urban">urban</a></li>
                <li><a href="#!project/current/resort">resort</a></li>
                <li><a href="#!project/current/spa">spa</a></li>
                <li><a href="#!project/current/restaurant">restaurant</a></li>
                <li><a href="#!project/current/restaurant">others</a></li>
            </ul>

.inner-ul {
  height:50px;
  overflow-y: auto;
}

Hard to tell from the question and fiddle (and I can't see the image) but I think you need

overflow-x: auto;

Here's a good resource for overflow: http://www.brunildo.org/test/Overflowxy2.html

Change height to 70px and add "overflow:auto;" to your menu css statement