我在尝试实现CSS无线电输入来控制3个导航项的打开/关闭功能时遇到了问题，这些导航项有隐藏的子项。我在使用悬停状态时工作得很好，但决定尝试CSS收音机或复选框输入。

我已经学习css和html两个月了，所以我对此感到非常沮丧！下面您将看到，我已经实现了无线电输入，并在一定程度上发挥了作用:

• 第1行导航项-打开所有3个下拉项（“第1行”、“第2行”、“第3行”）
• 第2行导航项-关闭“第1行”并打开“第2行”和“第3行”
• 第3行导航项-关闭“第1行”和“第2行”，并保持“第3行”打开

顺晟科技：

在我的CSS中添加了以下内容，我可以让它以我想要的方式运行。只是不确定这是否是最好的方法。

aside {
  font-family: "Helvetica";
  font-size: 16px;
}

a {
  text-decoration: none;
}


/*========== NAV ==========*/

.nav {
  position: fixed;
  top: 0;
  left: 100%;
  height: 100vh;
  padding: 1.5rem 1.2rem 0 1.5rem;
  background-image: linear-gradient(120deg, #e1e1e1, #f5f5f5, #eaeaea);
  z-index: 100;
  transition: .4s;
}

.nav__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 3rem;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  /* For mozilla */
}


/* For Google Chrome and others */

.nav__container::-webkit-scrollbar {
  display: none;
}

.nav__logo {
  font-weight: 500;
  margin-bottom: 2.5rem;
  font-size: 1.2rem !important;
  white-space: nowrap;
}

.nav__list,
.nav__items {
  display: grid;
}

.nav__list {
  row-gap: 2.2rem;
}

.nav__items {
  row-gap: 1rem;
}

.nav__subtitle {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: var(--text-color-light);
}

.nav__link {
  display: flex;
  align-items: center;
  color: #2c2c2c;
}

.nav__link:hover {
  color: #2180CF;
}

.nav__link:hover .nav__name {
  font-weight: 600;
}

.nav__icon {
  font-size: 1.5rem;
  margin-right: .7rem;
}

.nav__name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.nav__logout {
  margin-top: 4rem;
}


/* Dropdown */

.nav__dropdown {
  overflow: hidden;
  max-height: 21px;
  transition: all .1s ease-out .1s;
  white-space: nowrap;
}

input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.nav__dropdown-collapse {
  background-color: rgba(75, 75, 75, 0.07);
  border-radius: .25rem;
  margin-top: 1rem;
}

.nav__dropdown-content {
  display: grid;
  row-gap: 1.5rem;
  padding: .75rem 2.5rem .75rem 1.8rem;
}

.nav__dropdown-item {
  font-size: 14px;
  font-weight: 500;
  color: #2c2c2c;
}

.nav__dropdown-item:hover {
  color: #2180CF;
}

.nav__dropdown-icon {
  margin-left: auto;
  transition: .2s;
}


/* Show dropdown collapse */

input[type="radio"]:checked~*,
.nav__dropdown::before {
  max-height: 100rem;
  transition: all 1.7s ease-in .2s;
}


/* Rotate icon arrow */

.radio:checked .nav__dropdown-icon::before {
  transform: rotate(180deg);
}


/*===== Show menu =====*/

.show-menu {
  left: 0;
}


/*===== Active link =====*/

.active {
  color: #2180CF;
}

.nav {
  left: 0;
  padding: 1.2rem 1rem 0 1.5rem;
  width: 72px;
  /* Reduced navbar */
}

.nav__items {
  row-gap: 1.5rem;
}

.nav__icon {
  font-size: 24px;
}


/* Element opacity */

.nav__logo-name,
.nav__name,
.nav__subtitle,
.nav__dropdown-icon {
  opacity: 0;
  transition: opacity .6s;
}


/* Navbar expanded */

.nav:hover {
  width: 230px;
}


/* Visible elements */

.nav:hover .nav__logo-name {
  opacity: 1;
}

.nav:hover .nav__subtitle {
  opacity: 1;
}

.nav:hover .nav__name {
  opacity: 1;
}

.nav:hover .nav__dropdown-icon {
  opacity: 1;
}