链接到codepen
我试图这么做,所以有一个最大高度(或高度)设置到这个很长的列表,其余的滚动。我能够通过
轻松实现这一目标高度:800像素; 溢出:滚动;
我遇到的问题是"#subcategory"当我应用溢出时,项目在悬停时停止显示:滚动
非常感谢任何想法!
基本HTML结构
<!-- Start Auto Transport -->
<li id="topCategory"><a href="#">Auto Transport</a>
<ul id="subContainer">
<li id="subCategory"><a href="#">Auto Insurance</a></li>
<li id="subCategory"><a href="#">Auto Payment</a></li>
<li id="subCategory"><a href="#">Gas</a></li>
<li id="subCategory"><a href="#">Parking</a></li>
<li id="subCategory"><a href="#">Public Transportation</a></li>
<li id="subCategory"><a href="#">Service Parts</a></li>
<!-- add new becomes text field, user enters text then it becomes added as category -->
<li class="hideNewCategory">
<a class="mmNewCat" data-number="1" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
<input id="mmCat1" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
</li>
</ul>
</li>
<!-- End Auto Transport -->
<!-- Start Bills Utilities -->
<li id="topCategory"><a href="#">Bills & Utilities</a>
<ul id="subContainer">
<li id="subCategory"><a href="#">Domain Names</a></li>
<li id="subCategory"><a href="#">Fraud Protection</a></li>
<li id="subCategory"><a href="#">Home Phone</a></li>
<li id="subCategory"><a href="#">Hosting</a></li>
<li id="subCategory"><a href="#">Mobile Phone</a></li>
<li id="subCategory"><a href="#">Television</a></li>
<li id="subCategory"><a href="#">Utilities</a></li>
<!-- add new becomes text field, user enters text then it becomes added as category -->
<li class="hideNewCategory">
<a class="mmNewCat" data-number="2" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
<input id="mmCat2" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
</li>
</ul>
</li>
<!-- End Bills Utilities -->
相关CSS
ul li:hover #topContainer{
display: block;
}
ul li a {
display: block;
color: $blue;
text-decoration: none;
font-family: verdana;
font-size: 14px;
}
#topContainer{
list-style: none;
color: $blue;
width: 260px;
height: auto;
background: $white;
opacity: 0.9;
position: absolute;
z-index: 1000;
height:800px;
overflow:scroll;
}
#topCategory {
float: none;
width: auto;
height: 20px;
text-align: left;
margin-left: 15px;
}
#topCategory a:hover {
color: $white;
background-color: $blue;
}
#topCategory:hover #subContainer {
display: block;
}
#topCategory a {
font-size: 16px;
position: relative;
bottom: 41px;
margin-top: 46px;
margin-left: -15px;
padding: 20px 0 20px 20px;
border-bottom:1px solid $grey-10;
}
#topCategory a:hover {
color: $white;
}
#subContainer {
list-style: none;
color: $blue;
display: none;
font-size: 12px;
min-width: 230px;
width: 150px;
height: auto;
background: $white;
opacity: 0.9;
margin: -107px 0 0 245px; position: absolute;
z-index: 1000;
white-space:nowrap;
}
#subContainer a{
border-bottom:1px solid $grey-10;
margin-top: 41px;
}
#subCategory {
float: none;
width: auto;
height: 20px;
text-align: left;
margin-left: 10px;
}
#subCategory:hover {
background: none;
}
.active {
background: $white;
}
#subCategory {
float: none;
// hover length
width:215px;
// hover length
text-align: left;
height: 25px;
margin-left: 15px;
margin-right: -43px;
}
答案 0 :(得分:1)
子类别应该是Class
名称而不是Id
元素,更改它并且看起来更干净。
.subcategory {
}
<div class="subcategory"></div>