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.

overflow-y for ul, scroll down the list

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