如何让兄弟选择器检查是否在SASS工作中选中了复选框

Question

我意识到我没有正确陈述这个问题。我遇到的问题是点击汉堡包时菜单无法打开。我想可能是兄弟选择器的编码方式。如果我在.cc_menu-btn中显示复选框并单击该复选框，则会打开菜单。我错过了什么或者是我的选择器吗？

.cc_headernav {

  .cc_menu-btn {
    display: none;

    &:hover {
      background-color: #f4f4f4;
    }
  }

  .cc_menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;

    .navicon {
      background: #009FAE;
      display: block;
      height: 4px;
      position: relative;
      transition: background .2s ease-out;
      width: 30px;

      &:before {
        background: #009FAE;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
        top: 9px;
      }
      &:after {
        background: #009FAE;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
        top: -9px;
      }
    }
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
  }
  .cc_menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;

    li {

      a {
        display: block;
        padding: 20px 20px;
        border-right: 1px solid #f4f4f4;
        text-decoration: none;

        &:hover {
          background-color: #f4f4f4;
        }
      }
    }
  }
}

// CSS Need to Make SASSY

.cc_menu-btn:checked ~ .cc_menu {
  max-height: 240px;
  position: absolute;
  top: 60px;
  right: 0;
  z-index: 99;
  box-shadow: 0 3px 8px #c0c0c0;
}

.cc_menu-btn:checked + .cc_menu-icon .navicon {
  background: transparent;
}

.cc_menu-btn:checked + .cc_menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.cc_menu-btn:checked + .cc_menu-icon .navicon:after {
  transform: rotate(45deg);
}

.cc_menu-btn:checked + .cc_menu-icon:not(.steps) .navicon:before,
.cc_menu-btn:checked + .cc_menu-icon:not(.steps) .navicon:after {
  top: 0;
}

HTML / JSX：

<Column small={1} className="cc_headernav">
   <input className="cc_menu-btn" type="checkbox" id="menu-btn" />
   <label className="cc_menu-icon" for="cc_menu-btn"><span className="navicon"></span></label>
   <ul className="cc_menu">
     <li><Link name="Menu One" to="/MenuOne" onClick={this.changeTitle.bind(this)}>Menu One</Link></li>
     <li><Link name="Menu Two" to="/MenuTwo" onClick={this.changeTitle.bind(this)}>Menu Two</Link></li>
     <li><Link name="Menu Three" to="/Menu Three" onClick={this.changeTitle.bind(this)}>Menu Three</Link></li>
   </ul>
 </Column>

非常感谢任何帮助！