overflow:scroll stops hover states from activating - css

Question

link to codepen
I'm trying to make it so there is a max-height (or height) set to this very long list, and for the rest to scroll. I was able to easily achieve that with
height:800px;
overflow:scroll;
The Problem I have is that the "#subcategory" items stop displaying on hover when I apply overflow:scroll
Any ideas are greatly appreciated!
Basic HTML Structure
<!-- Start Auto Transport -->
<li id="topCategory">Auto Transport
<ul id="subContainer">
<li id="subCategory">Auto Insurance</li>
<li id="subCategory">Auto Payment</li>
<li id="subCategory">Gas</li>
<li id="subCategory">Parking</li>
<li id="subCategory">Public Transportation</li>
<li id="subCategory">Service Parts</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">Bills & Utilities
<ul id="subContainer">
<li id="subCategory">Domain Names</li>
<li id="subCategory">Fraud Protection</li>
<li id="subCategory">Home Phone</li>
<li id="subCategory">Hosting</li>
<li id="subCategory">Mobile Phone</li>
<li id="subCategory">Television</li>
<li id="subCategory">Utilities</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;
}

Answer 1

Subcategory should be a Class name not an Id element, change that and things will look cleaner.
.subcategory {
}
<div class="subcategory"></div>