HTML 如何在一个地方为所有选项设置下拉菜单？

Question

我试图让所有选项的下拉菜单出现在一个地方。

我希望下拉菜单显示为“主要 1”选项（相同位置）。 目前，当我将鼠标悬停在选项上时，菜单显示在每个“主要”（主要 2、主要 3 等）选项的行中，但是我希望它们都触发下拉菜单以准确显示在“主要 1”下拉菜单的位置菜单出现。我尝试从“位置：相对”更改“位置：固定”，但菜单根本没有出现。

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 1</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>
     <li class="sidebar_menu_item">
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 2</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>
     <li class="sidebar_menu_item">
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 3</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>
     <li class="sidebar_menu_item">
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 4</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>
     <li class="sidebar_menu_item">
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 5</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>
     <li class="sidebar_menu_item">
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 6</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;
}

Answer 1

我在重做您的 HTML 和简化了您的 CSS 时有点随意，但我认为已经得到了您想要的东西。无论您将鼠标悬停在哪个订单项上，您都希望您的菜单取消隐藏并显示在同一位置。在 CSS 中，我设置了 target div 的定位，我认为您遇到了一些问题。希望对你有所帮助。

可以在Stackblitz找到更好的工作示例

body {
  font-family: sans-serif;
}

/* setting the positioning of the target here allows static display of the options */
.target {
  width: 350px;
  padding: 20px;
  display: none;
  position: relative;
  box-shadow: 1px 2px 8px grey;
}

.target ul {
   padding: 0;
  list-style-type: none;
}

.target li {
  margin: 0;
  padding: 0px 0px 0px 0px;
}

li span {
  cursor: pointer;
}

/* this is the important part here. the targets are the child of the hover element */
li span:hover + div.target {
  position: absolute;
  display: block;
  top: 60px;
  left: 200px;
}

header {
  font-weight: bold;
}

header,
.row {
  display: flex; /* aligns all child elements (flex items) in a row */
}

.col {
  flex: 1; /* distributes space on the line equally among items */
}

<ul>
  <li><span>Main - Item 1</span>
    <div class="target">
      <section>
        <header>
          <div class="col">Sub-Item 1 A </div>
          <div class="col">Sub-Item 1 B</div>
          <div class="col">Sub-Item 1 C</div>
        </header>
        <div class="row">
          <div class="col">
            <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="col">
            <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="col">
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
        </div>
      </section>
  </li>
  <li><span>Main - Item 2</span>
    <div class="target">
      <section>
        <header>
          <div class="col">Sub-Item 2 A</div>
          <div class="col">Sub-Item 2 B</div>
          <div class="col">Sub-Item 2 C</div>
        </header>
        <div class="row">
          <div class="col">
            <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="col">
            <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="col">
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  </li>
  <li><span>Main - Item 3</span>
    <div class="target">
      <section>
        <header>
          <div class="col">Sub-Item 3 A</div>
          <div class="col">Sub-Item 3 B</div>
          <div class="col">Sub-Item 3 C</div>
        </header>
        <div class="row">
          <div class="col">
            <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="col">
            <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="col">
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  </li>
  <li><span>Main - Item 4</span>
    <div class="target">
      <section>
        <header>
          <div class="col">Sub-Item 4 A</div>
          <div class="col">Sub-Item 4 B</div>
          <div class="col">Sub-Item 4 C</div>
        </header>
        <div class="row">
          <div class="col">
            <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="col">
            <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="col">
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  </li>
</ul>