溢出：滚动停止从激活

Question

链接codepen

我想使它所以设置这个很长的列表中的最大高度（或高度），并为其余的滚动悬停状态。我能够轻松实现，与

身高：800px; 溢出：滚动;

这个问题我有是，“#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; 
} 

Answer 1

子目录应该是一个Class名称不是一个Id元素，改变这种事情会看起来更干净。

.subcategory { 

} 

<div class="subcategory"></div>