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

分类：编程问答

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

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

我希望下拉菜单显示为“Main 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;
}

解决方法

我在重做您的 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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot