HTML如何将所有选项的下拉菜单设置在一个位置

Question

我正试图让下拉菜单显示在所有选项的一个位置。

我希望下拉菜单显示为"Main 1"选项(相同位置(。目前，当我将鼠标悬停在选项上时，每个"Main"(Main 2、Main 3等(选项的菜单都会出现在一行中，但我希望它们都能触发下拉菜单，使其恰好出现在"Main 1"下拉菜单出现的位置。我试着从"position:relative"更改"position:fixed"，但菜单根本没有出现。

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中，我设置了targetdiv的位置，我认为您遇到了一些问题。希望这对你有所帮助。

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

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>