将鼠标悬停在子菜单上时，下拉菜单不会向下推

Question

如果这是一个愚蠢的问题，我会提前道歉。我试着用css在菜单上做一个下拉菜单，我觉得我快要成功了，但我把一切都搞砸了。在这一点上，我淹没在我的css样式表中，我找不到让它工作的方法。

基本上，当试图将鼠标悬停在菜单上以获得下拉子菜单(下一个菜单(时，不会向下推以腾出空间到上一个菜单的子菜单，导致它们都在悬停(至少这是我理解问题的方式(。

我似乎找不到一种方法来保持子菜单的稳定，当它们悬停在上面，下一个菜单按下时

我希望有人能指出我在这个css代码上做错了什么

nav#sidebar {
width: 280px;
background: #FFFFFF;
color: #6a6c70;
border-right: 1px solid #34373d;
/* shrinked navbar */
}
nav#sidebar a {
color: inherit;
text-decoration: none;
position: relative;
}
nav#sidebar a[data-toggle="collapse"]::after {
content: 'f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav#sidebar a[aria-expanded="true"] {
background: #FFFFFF;
}
nav#sidebar a[aria-expanded="true"]::after {
content: 'f107';
}
nav#sidebar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav#sidebar .sidebar-header {
padding: 30px 20px;
}
nav#sidebar .sidebar-header h1,
nav#sidebar .sidebar-header p {
margin-bottom: 0;
}
nav#sidebar .sidebar-header h1 {
color: #8a8d93;
}
nav#sidebar .sidebar-header p {
font-size: 0.9rem;
}
nav#sidebar span.heading {
font-weight: 700;
margin-left: 20px;
color: #494d53;
font-size: 1.2rem;
margin-bottom: 15px;
}
nav#sidebar .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
background: none;
padding: 4px;
border: 3px solid #282b2f;
}
nav#sidebar ul {
max-height: none;
}
nav#sidebar li {
position: relative;
/* menu item */
/* submenu item */
/* menu item active */
/* submenu item active */
}
nav#sidebar li a {
padding: 18px 20px;
display: block;
font-weight: 400;
}
nav#sidebar li a:hover {
background: #B5B0B8;
padding-bottom: 15px;
position: relative;

}
nav#sidebar li a:hover i {
color: #060808;
display: block;
position: absolute;
}
nav#sidebar li a i {
margin-right: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding-right: 20px;
border-right: 1px solid #454649;
}
nav#sidebar li li a {
padding: 14px;
padding-left: 60px;
background: #FFFFFF;
}
nav#sidebar li li a:hover {
background: #B5B0B8;
display: block;
position: absolute;
min-width: 80px;
padding-bottom: 20px; 
}
nav#sidebar li li a:hover i {
color: #060808;
}
nav#sidebar li::before {
content: '';
width: 2px;
height: 100%;
background: none;
display: none;
position: relative;
top: 0;
left: 0;
z-index: 99;
}
nav#sidebar li.active::before {
background: #060808;
}
nav#sidebar li.active > a {
background: #e93030e8;
color: #060808;
}
nav#sidebar li.active i {
color: #060808;
}
nav#sidebar li li.active > a {
background: #FFFFFF;
}

<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div class="title">
<h1 class="h5">Analyse de Stock</h1>
<p>Bienvenue</p>
</div>
</div>
<!-- Sidebar Navigation Menus--><span class="heading">Menu</span>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-home"></i>
Home
</a>
<ul class="list-unstyled collapse" id="homeSubmenu" style="">
<li>
<a href="/dash2.html"> Home Dashboard </a>
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-copy"></i>
Analytics
</a>
<ul class="list-unstyled collapse" id="pageSubmenu" style="">
<li>
<a href="analytics2.html"> <i class="icon-chart"></i>Sales Analytics </a>
</li>
<li>
<a href="Repanalytics2.html"> <i class="icon-chart"></i>Replenishment Analytics </a>
</li>
<li>
<a href="items2.html"> <i class="icon-chart"></i>Items Analytics</a>
</li>
<li>
<a href="Supplier2.html"> <i class="icon-chart"></i>Supplier Analytics</a>
</li>
</ul>
</li>
<li>
<a href="#page2Submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Sales
</a>
<ul class="collapse list-unstyled" id="page2Submenu">
<li>
<a href="new_sale.html"> <i class="icon-padnote"></i>Record Sale</a>
</li>
<li>
<a href="Sale_history.html"> <i class="icon-padnote"></i>Sale history</a>
</li>
<li>
<a href="search_sale.html"> <i class="icon-padnote"></i>Search sale</a>
</li>
</ul>
</li>
<li>
<a href="#page3Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Orders
</a>
<ul class="collapse list-unstyled" id="page3Submenu">
<li>
<a href="new_purchase.html"> <i class="icon-padnote"></i>Record Purchase</a>
</li>
<li>
<a href="Purchase_history.html"> <i class="icon-padnote"></i>Purchase history</a>
</li>
<li>
<a href="search_purchase.html"> <i class="icon-padnote"></i>Search order</a>
</li>
<li>
<a href="SupplierData2.html"> <i class="icon-padnote"></i>Supplier Replenishment</a>
</li>
<li>
<a href="ItemData2.html"> <i class="icon-padnote"></i>Item Replenishment</a>
</li>
</ul>
</li>
<li>
<a href="#page4Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Bases
</a>
<ul class="collapse list-unstyled" id="page4Submenu">
<li>
<a href="supplierbase2.html"> <i class="icon-padnote"></i>Supplier Base</a>
</li>
<li>
<a href="itembase2.html"> <i class="icon-padnote"></i>Item Base</a>
</li>
</ul>
</li>
</ul></nav>

Answer 1

这里的问题实际上更多的是设计和用户体验，而不是技术性质。你需要你的子菜单来移动、淡入淡出或类似的东西吗？这会如何影响与用户的交互，用户将光标指向某个东西？恐怕，这种类型的交互式垂直菜单存在根本缺陷。

下面您可以看到一个经过修补的代码示例，这些代码刚好可以正常工作，并且您可以直接说出意外行为。简而言之：用户的操作不能改变用户正在交互的上下文。在这种情况下，上下文是用户悬停在其上的面板。用户瞄准时，它们的位置不得改变。

这个问题可以通过多种方式解决：

• 静态和完全展开的垂直菜单
• 子菜单在单击时显示并保持展开状态(即单击以切换(
• 子菜单是静态的，并且在用户导航到该区域内的任何页面后都是可见的(例如，通过单击其中一个要点(
• 水平菜单

nav#sidebar {
width: 280px;
background: #FFFFFF;
color: #6a6c70;
border-right: 1px solid #34373d;
/* shrinked navbar */
}
nav#sidebar a {
color: inherit;
text-decoration: none;
position: relative;
}
nav#sidebar a[data-toggle="collapse"]::after {
content: 'f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav#sidebar a[aria-expanded="true"] {
background: #FFFFFF;
}
nav#sidebar a[aria-expanded="true"]::after {
content: 'f107';
}
nav#sidebar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav#sidebar .sidebar-header {
padding: 30px 20px;
}
nav#sidebar .sidebar-header h1,
nav#sidebar .sidebar-header p {
margin-bottom: 0;
}
nav#sidebar .sidebar-header h1 {
color: #8a8d93;
}
nav#sidebar .sidebar-header p {
font-size: 0.9rem;
}
nav#sidebar span.heading {
font-weight: 700;
margin-left: 20px;
color: #494d53;
font-size: 1.2rem;
margin-bottom: 15px;
}
nav#sidebar .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
background: none;
padding: 4px;
border: 3px solid #282b2f;
}
nav#sidebar ul {
max-height: none;
}
nav#sidebar li {
position: relative;
/* menu item */
/* submenu item */
/* menu item active */
/* submenu item active */
}
nav#sidebar li a {
padding: 18px 20px;
display: block;
font-weight: 400;
}
nav#sidebar li li {
overflow: hidden;
display: none;
}
nav#sidebar li:hover li {
height: 100%;
display: block;
}
nav#sidebar li a i {
margin-right: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding-right: 20px;
border-right: 1px solid #454649;
}
nav#sidebar li li a {
padding: 14px;
padding-left: 60px;
background: #FFFFFF;
}
nav#sidebar li li a:hover {
background: #B5B0B8;
display: block;
}
nav#sidebar li li a:hover i {
color: #060808;
}
nav#sidebar li::before {
content: '';
width: 2px;
height: 100%;
background: none;
display: none;
position: relative;
top: 0;
left: 0;
z-index: 99;
}
nav#sidebar li.active::before {
background: #060808;
}
nav#sidebar li.active > a {
background: #e93030e8;
color: #060808;
}
nav#sidebar li.active i {
color: #060808;
}
nav#sidebar li li.active > a {
background: #FFFFFF;
}

<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div class="title">
<h1 class="h5">Analyse de Stock</h1>
<p>Bienvenue</p>
</div>
</div>
<!-- Sidebar Navigation Menus--><span class="heading">Menu</span>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-home"></i>
Home
</a>
<ul class="list-unstyled collapse" id="homeSubmenu" style="">
<li>
<a href="/dash2.html"> Home Dashboard </a>
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-copy"></i>
Analytics
</a>
<ul class="list-unstyled collapse" id="pageSubmenu" style="">
<li>
<a href="analytics2.html"> <i class="icon-chart"></i>Sales Analytics </a>
</li>
<li>
<a href="Repanalytics2.html"> <i class="icon-chart"></i>Replenishment Analytics </a>
</li>
<li>
<a href="items2.html"> <i class="icon-chart"></i>Items Analytics</a>
</li>
<li>
<a href="Supplier2.html"> <i class="icon-chart"></i>Supplier Analytics</a>
</li>
</ul>
</li>
<li>
<a href="#page2Submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Sales
</a>
<ul class="collapse list-unstyled" id="page2Submenu">
<li>
<a href="new_sale.html"> <i class="icon-padnote"></i>Record Sale</a>
</li>
<li>
<a href="Sale_history.html"> <i class="icon-padnote"></i>Sale history</a>
</li>
<li>
<a href="search_sale.html"> <i class="icon-padnote"></i>Search sale</a>
</li>
</ul>
</li>
<li>
<a href="#page3Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Orders
</a>
<ul class="collapse list-unstyled" id="page3Submenu">
<li>
<a href="new_purchase.html"> <i class="icon-padnote"></i>Record Purchase</a>
</li>
<li>
<a href="Purchase_history.html"> <i class="icon-padnote"></i>Purchase history</a>
</li>
<li>
<a href="search_purchase.html"> <i class="icon-padnote"></i>Search order</a>
</li>
<li>
<a href="SupplierData2.html"> <i class="icon-padnote"></i>Supplier Replenishment</a>
</li>
<li>
<a href="ItemData2.html"> <i class="icon-padnote"></i>Item Replenishment</a>
</li>
</ul>
</li>
<li>
<a href="#page4Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Bases
</a>
<ul class="collapse list-unstyled" id="page4Submenu">
<li>
<a href="supplierbase2.html"> <i class="icon-padnote"></i>Supplier Base</a>
</li>
<li>
<a href="itembase2.html"> <i class="icon-padnote"></i>Item Base</a>
</li>
</ul>
</li>
</ul></nav>

Answer 2

在查看代码时，它似乎确实能正常向下推？不过它看起来确实有点小故障。可能是html或css的另一部分导致了问题。

演示gif

Answer 3

获取要显示的元素的最简单方法是使用您正在使用的:hover事件，但您似乎是在使用列表。试着用一个更简单的方法吧？

CSS：

body {
font-family: Arial, Helvetica, sans-serif;
}
.hide {
display: none;
}
.main:hover + .hide {
display: block;
color: grey;
}

HTML:

<div class="main">
<p>Hover over me<p>
</div>
<div class="hide">
<p>Hello, World!</p>
</div>