HTML/CSS 无法在下拉菜单中显示项目

Question

我是编码和学习的新手。

正在处理以下项目。我无法让 sub-items（'choice 1' 到 'choice 5'）显示在下拉列表中。我已经能够显示标题（'Sub-item'），但无法显示下面的内容列表（'choice' 等）。

有人可以帮忙吗？

HTML

<div class="sidebar_menu">
  <ul>
    <li>
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main</label>
      </a>
      <ul id="lp_test_pop_up">
        <div class="lp_test_popup_box">
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 1</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 2</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 3</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 4</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 5</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 6</a></h3>
             <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
        </div>
      </ul>
    </li>
  </ul>
</div>
</div>

CSS

.sidebar_menu ul {
  list-style: none;
  margin: 0;
  padding: 0px 0px 0px 0px;
}

.sidebar_menu ul li {
  padding: 10px;
  position: relative;
  width: 250px;
  background-color: #fcfcfc;
  border-top: 1px solid #e4e8ea;
}

.sidebar_menu ul li:hover {
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 12%);
  position: relative;
}

.sidebar_menu ul ul {
  transform: all 0.3s;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

.sidebar_menu ul li:hover > ul {
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  z-index: 9997;
}

.sidebar_menu ul li a {
  font-size: 14px;
  color: black;
  text-decoration: none;
}

.sidebar_menu ul li ul {
  width: 634px;
  padding: 20px;
  padding-bottom: 10px;
  background-color: white;
  box-shadow: 1px 2px 8px grey;
}

.sidebar_menu ul li ul ul {
  width: 134px;
  padding: 0px;
  background-color: white;
}

.sidebar_menu ul li ul li {
  min-width: 250px;
  border: none;
}

label.sidebar_menu_label {
  font-size: 14px;
  margin-left: 10px;
  color: black;
}

.lp_test_popup_box {
  display: flex;
  flex-wrap: wrap;
}

.lp_category_item {
  width: 33%;
  height: 125px;
}

Answer 1

.sidebar_menu ul ul {
  transform: all 0.3s;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

由于此 CSS 代码，未显示选择。这些样式应用于“.sidebar_menu ul”中存在的每个“ul”元素。

要了解有关 选择器 的更多信息，请查看此站点 click here

我在 HTML 中添加了一些类并更新了 CSS 代码

修复!!

HTML

<div class="sidebar_menu">
  <ul class="sidebar_menu_list">
    <li class="sidebar_menu_item">
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main</label>
      </a>
      <ul id="lp_test_pop_up">
        <div class="lp_test_popup_box">
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 1</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 2</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 3</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 4</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 5</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 6</a></h3>
             <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
        </div>
      </ul>
    </li>
  </ul>
</div>
</div>

CSS

.sidebar_menu_list  {
  list-style: none;
  margin: 0;
  padding: 0px 0px 0px 0px;
}

.sidebar_menu_item {
  padding: 10px;
  position: relative;
  width: 250px;
  background-color: #fcfcfc;
  border-top: 1px solid #e4e8ea;
}

.sidebar_menu_item:hover {
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 12%);
  position: relative;
}

#lp_test_pop_up {
  transform: all 0.3s;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  left: 100%;
  top: -2%; 
}

.sidebar_menu_item:hover #lp_test_pop_up  {
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  z-index: 9997;
}

.sidebar_menu  ul   li  a {
  font-size: 14px;
  color: black;
  text-decoration: none;
}

#lp_test_pop_up {
  width:634px;
  padding: 20px;
  padding-bottom: 10px;
  background-color: white;
  box-shadow: 1px 2px 8px grey;
}

.sidebar_menu ul li ul ul {
  width: 134px;
  margin:15px 0px; 
  list-style-type:none;
  padding:0px;
}

.sidebar_menu ul li ul li {
  min-width: 250px;
  border: none;
}

label.sidebar_menu_label {
  font-size: 14px;
  margin-left: 10px;
  color: black;
}

.lp_test_popup_box {
  display: flex;
  flex-wrap: wrap;
}

.lp_category_item {
  width: 33%;
  height: 125px;
}


#lp_category_subheading{
  margin:0px;
}

.lp_category_item{
  margin-bottom:20px;
}

.lp_category_item ul li{
  margin:2px 0px;
}

HTML/CSS 无法在下拉菜单中显示项目

HTML/CSS Trouble displaying items in dropdown menu

html

css

drop-down-menu