HTML 如何将所有选项的下拉菜单设置在一个位置?
HTML How do I get the dropdown menu to be set in one place for all options?
我正在尝试让所有选项的下拉菜单出现在一个地方。
我希望下拉菜单显示为 'Main 1' 选项(相同位置)。
目前,当我将鼠标悬停在选项上时,每个 'Main'(Main 2、Main 3 等)选项的菜单都会显示在一行中,但是我希望它们全部触发下拉菜单以准确显示 [=21] =] 出现下拉菜单。我尝试将 'position: fixed' 从 '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;
}
我重做了您的 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>
我正在尝试让所有选项的下拉菜单出现在一个地方。
我希望下拉菜单显示为 'Main 1' 选项(相同位置)。 目前,当我将鼠标悬停在选项上时,每个 'Main'(Main 2、Main 3 等)选项的菜单都会显示在一行中,但是我希望它们全部触发下拉菜单以准确显示 [=21] =] 出现下拉菜单。我尝试将 'position: fixed' 从 '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;
}
我重做了您的 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>