overflow-y for ul,向下滚动列表

Question

我的菜单有问题.我只想在任何时候出现四个菜单项,这意味着如果有溢出,它将被剪切,用户将不得不向下滚动.

我尝试设置overflow-y,希望看到它被剪裁,但相反,会出现一个水平滚动条.

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></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;
    });
})

JS Fiddle上的演示.

这是一个截图:我只想最初出现"全部","城市","度假村"和"水疗中心".

Answer 1

不确定是否可以限制元素的数量,但是您可以设置高度并将溢出设置为自动,因此如果它高于指定的宽度,则会有一个滚动条.

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