我的菜单有问题。我只想在任何时候出现四个菜单项,这意味着如果有溢出,它将被剪切,用户将不得不向下滚动。
我尝试设置overflow-y
,希望看到它被裁剪,但是会出现一个水平滚动条。
<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>
#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;
}
$(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;
});
})
以下是截图:我最初只想要“全部”,“城市”,“度假村”和“水疗中心”。
答案 0 :(得分:5)
不确定您是否可以限制元素数量,但您可以设置高度并将溢出设置为自动,因此如果它高于指定的宽度,则会有一个滚动条。
<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;
}
答案 1 :(得分:2)
很难从问题和小提琴中分辨出来(我看不到图像),但我认为你需要
overflow-x: auto;
这是一个很好的溢出资源:http://www.brunildo.org/test/Overflowxy2.html
答案 2 :(得分:0)
将高度更改为70px并添加“overflow:auto;”到你的菜单css声明