0

I am trying to create sidebar drop down menu in wordpress for one menu item among list of menu items.Using CSS i am not able to get desired result where Clicking on the dropdown button to open the dropdown menu inside the side navigation..Any help or alternate solution using JavaScript.Here is the working sheet below.What i did

<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>
Jack triun
  • 85
  • 2
  • 14
  • Did you check the code you shared ? HTML is incomplete , CSS styles are incorrect ( `.` missing from the selectors ) and maybe other problems. Please share a working code that reproduces your problem. If you don't take the time and effort for that, why would we take the time and effort to help you ? – Mihai T Dec 20 '19 at 09:22
  • @MihaiT i agree css not working designed can you please help – Jack triun Dec 20 '19 at 09:46
  • Well it doesn't reproduce the problem you say you are having. Please fix the CSS which i presume it's written by you because you say : `What i did : ` and then the HTML and CSS. So, i presume all that is written by you so you know how to fix it to actually work. I also told you what was the problem with it. Fix it and then i will help you solve your problem about the sidebar dropdown menu – Mihai T Dec 20 '19 at 09:49
  • @MihaiT hope i did what you asked for – Jack triun Dec 20 '19 at 10:26
  • https://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu will this link help you? – Serge Tkachuk Dec 20 '19 at 10:38
  • no it didnt worked – Jack triun Dec 20 '19 at 10:54

0 Answers0