Visit the codepen page
I am attempting to set a max-height or height to a long list and make the rest scroll. I achieved this by using:
height:800px; overflow:scroll;
The issue I'm facing is that the "#subcategory" items stop displaying on hover when I apply overflow:scroll
Any suggestions would be welcome!
Basic HTML Structure
<!-- 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 -->
relevant 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;
}