我有一个天桥菜单。我需要控制它的高度到最大500px并设置一个滚动超过它。但无法使用以下代码执行此操作。二级飞行菜单没有显示出来。请提出解决方案以取得成果。
<div class="outlet-account-list" id="outlet-filtering" ng-show="showOutletFlyer">
<style type="text/css">
/** Top Level Menu **/
#menuwrapper ul, #menuwrapper ul li{
margin:0;
padding:0;
list-style:none;
}
#menuwrapper ul{
padding: 5px 0;
background: #fff;
width:170px;
max-height: 500px;
}
#menuwrapper > ul {
margin-left: 8px;
overflow-x: visible; //Removing these two overflow rules will show up the list.
overflow-y: auto;
}
#menuwrapper ul li{
width:100%;
cursor:pointer !important;
}
#menuwrapper ul > li:hover{
background-color:#e9f3ff;
position:relative;
cursor:pointer !important;
}
#menuwrapper ul li a{
padding:5px 10px;
padding-right: 5px;
color:#000;
display:inline-block;
text-decoration:none;
width: 100%;
cursor:pointer !important;
}
#menuwrapper ul li a span{
cursor:pointer !important;
}
/**** SECOND LEVEL MENU ****/
#menuwrapper ul li ul{
position:absolute;
box-shadow: 0px 0px 1px 1px #ccc;
display:none;
}
#menuwrapper ul li:hover ul{
left:166px;
top:0px;
display:block;
}
#menuwrapper ul li:hover ul li:hover{
background-color:#e9f3ff;
}
#menuwrapper ul li ul li a{
color:#000;
display:inline-block;
width:120px;
}
#menuwrapper ul{
/*height: 500px;*/
/*overflow-y: auto;*/
/*overflow-x: hidden;*/
}
#menuwrapper ::-webkit-scrollbar {
width: 4px;
}
#menuwrapper ::-webkit-scrollbar-thumb {
background-color: #000;
-webkit-border-radius: 8px;
}
</style>
<div id="menuwrapper" ng-if="(outlets.length > 1 || outlets[0].accountCommands.length > 1)" ng-click="preventClick($event)">
<ul>
<li ng-if="outlets.length > 1"><a ng-click="setOutletAcc('','')" class="text-capitalize">All Outlets</a></li>
<li ng-repeat="outlet in outlets" ng-click="(outlet.accountCommands.length == 1) && setOutletAcc(outlet.id,outlet.accountCommands[0].id)">
<a><span class="pull-left wrap_text130 text-capitalize">{{outlet.name}}</span>
<span class="icon-pagination-right pull-right marginTR5" ng-hide="outlet.accountCommands.length == 1"></span>
</a>
<ul ng-hide="outlet.accountCommands.length == 1">
<li ng-if="outlet.accountCommands.length>1"><a ng-click="setOutletAcc(outlet.id, '')" class="text-capitalize">All Accounts</a></li>
<li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
答案 0 :(得分：0)
您好我已经解决了您的问题。现在我添加了100px高度来显示滚动。以后你可以把它增加到500px。 看看片段
/** Top Level Menu **/
#menuwrapper ul, #menuwrapper ul li{
margin:0;
padding:0;
list-style:none;
}
#menuwrapper ul{
padding: 5px 0;
background: #fff;
width:170px;
max-height: 500px;
}
#menuwrapper > ul {
margin-left: 8px;
overflow-x: visible; //Removing these two overflow rules will show up the list.
overflow-y: auto;
}
#menuwrapper ul li{
width:100%;
cursor:pointer !important;
}
#menuwrapper ul > li:hover{
background-color:#e9f3ff;
position:relative;
cursor:pointer !important;
}
#menuwrapper ul li a{
padding:5px 10px;
padding-right: 5px;
color:#000;
display:inline-block;
text-decoration:none;
width: 100%;
cursor:pointer !important;
}
#menuwrapper ul li a span{
cursor:pointer !important;
}
/**** SECOND LEVEL MENU ****/
#menuwrapper ul li ul{
position:absolute;
box-shadow: 0px 0px 1px 1px #ccc;
display:none;
max-height:100px;
overflow:auto;
}
#menuwrapper ul li:hover ul{
left:166px;
top:0px;
display:block;
}
#menuwrapper ul li:hover ul li:hover{
background-color:#e9f3ff;
}
#menuwrapper ul li ul li a{
color:#000;
display:inline-block;
width:120px;
}
#menuwrapper ul{
/*height: 500px;*/
/*overflow-y: auto;*/
/*overflow-x: hidden;*/
}
#menuwrapper ::-webkit-scrollbar {
width: 4px;
}
#menuwrapper ::-webkit-scrollbar-thumb {
background-color: #000;
-webkit-border-radius: 8px;
}<div class="outlet-account-list" id="outlet-filtering" ng-show="showOutletFlyer">
<div id="menuwrapper" ng-if="(outlets.length > 1 || outlets[0].accountCommands.length > 1)" ng-click="preventClick($event)">
<ul>
<li ng-if="outlets.length > 1"><a ng-click="setOutletAcc('','')" class="text-capitalize">All Outlets</a></li>
<li ng-repeat="outlet in outlets" ng-click="(outlet.accountCommands.length == 1) && setOutletAcc(outlet.id,outlet.accountCommands[0].id)">
<a><span class="pull-left wrap_text130 text-capitalize">{{outlet.name}}</span>
<span class="icon-pagination-right pull-right marginTR5" ng-hide="outlet.accountCommands.length == 1"></span>
</a>
<ul ng-hide="outlet.accountCommands.length == 1">
<li ng-if="outlet.accountCommands.length>1"><a ng-click="setOutletAcc(outlet.id, '')" class="text-capitalize">All Accounts</a></li>
<li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li>
<li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li><li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li>
</ul>
</li>
</ul>
</div>
</div>