css - 溢出:滚动停止激活悬停状态

Question

链接到 codepen

我正在尝试为这个很长的列表设置一个最大高度(或高度)，并让其余列表滚动。我能够通过

轻松实现这一目标

高度:800px； 溢出:滚动；

我遇到的问题是，当我应用 overflow:scroll 时，“#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>