php - 侧边栏菜单下拉淹没 wordpress 不工作

Question

我正在尝试在 wordpress 中为菜单项列表中的一个菜单项创建侧边栏下拉菜单。使用 CSS 我无法获得所需的结果，其中单击下拉按钮以打开侧面导航内的下拉菜单..任何帮助或使用 JavaScript 的替代解决方案。这是下面的工作表。我做了什么

<div id="nav_menu-2" class="widget widget_nav_menu">
<div class="menu-desh-container">
 <li id="menu-item-5381" class="menu-item menu-item-type-custom menu-item- object-custom menu-item-has-children menu-item-5381"><a  href="http://#">Images</a>
 <ul class="sub-menu">
<li id="menu-item-5478" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5478"><a href="https://www.akruticlinic.in/before-after-acute-burn-care/">Care</a></li>
<li id="menu-item-5479" class="menu-item menu-item-type-post_type menu-item- object-page menu-item-5479"><a href="https://www.akruticlinic.in/before-after-body-contouring/">Body</a></li>
  </ul>
 </li>
 </ul></div></div>

> CSS


     <style>
 body {
   font-family: Arial, Helvetica, sans-serif;
 }

 .widget widget_nav_menu {
   overflow: hidden;
   background-color: #333;
 }

 .widget widget_nav_menu a {
   float: left;
   font-size: 16px;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
 }

 .menu-desh-container {
   float: left;
   overflow: hidden;
 }

 .menu-desh-container .menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5381 {
   font-size: 16px;  
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
 }

 .widget widget_nav_menu a:hover, .menu-desh-container:hover .menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5381 {
   background-color: red;
 }

 .sub-menu {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }

 .sub-menu a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
 }

 .sub-menu a:hover {
   background-color: #ddd;
 }

 .menu-desh-container:hover .sub-menu {
   display: block;
 }
 </style>

标签： phpcsswordpressdrop-down-menunavigation