下拉菜单不会将鼠标悬停在子菜单上

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

在查看您的代码时，它似乎确实被按下了吗？不过，它似乎确实有点小故障。可能是HTML或CSS的另一部分引起了问题。

demo gif

Answer 2

显示元素的最简单方法是使用您正在使用的：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>

Answer 3

这里的问题实际上更多是关于设计和用户体验，而不是技术本质。您是否需要子菜单来移动，褪色或类似的动作？这如何影响与将光标对准某物的用户的交互？恐怕这种类型的交互式垂直菜单根本有缺陷。

在下面，您可以看到一个示例代码，它们经过了适当的修补才能正常工作，并且可以立即告诉意外行为。简而言之：用户的操作一定不能改变与用户交互的上下文。在这种情况下，上下文是用户悬停的面板。用户瞄准时，其位置不得改变。

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

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

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>