Generic dropdown for HTML element

See more:

CSS

HTML

CSS3

Dear friends,

I want to develop a Generic Dropdown menu for any HTML element like the Pen attached here.
My HTML is :

<div class="tui-dropdown-hover">
  <button>Hover Me!</button>
  <div class="tui-dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
   
<div class="tui-dropdown-hover">
  <p>Hover Me!
    <span class="tui-dropdown-content">
       This is a Dropdown for the Span content on the P
    </span>
  </p>
</div>   
      
  <br/>  <br/>  <br/>  <br/>    
 <ul class="tui-navbar">
 <li>Link 1</li>
 <li>&nbsp;&nbsp;&nbsp;Link 2</li>
 <li>&nbsp;&nbsp;&nbsp;Link 3</li>
 <li class="tui-dropdown-hover">&nbsp;&nbsp;&nbsp;Link 4
        <div class="tui-dropdown-content">
          <a href="#">Sub Link 1</a>
          <a href="#">Sub Link 2</a>
          <a href="#">Sub Link 3</a>
          <a class="tui-dropdown-hover" href="#">Level 2 Dropdown
           <div class="tui-dropdown-content">
               <a href="#">Level 2 Sub Link 1</a>
               <a href="#">Level 2 Sub Link 2</a>
               <a href="#">Level 2 Sub Link 3</a>
           </div>
          </a>
        </div>
 
 </li>
 </ul>

  <br/>  <br/>  <br/>  <br/>   
  
 <div class="tui-dropdown-hover"><img src="27365662004_aabef636ae_s.jpg">
 <div class="tui-dropdown-content"><img src="pixelmator_200.png">
  <p>This is a content after hover into Image</p>
 </div>
 </div>

& My CSS code is

.tui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}
.tui-navbar li{float:left}.tui-navbar li a{display:block;padding:.5em 1em}.tui-navbar li a:hover{color:#000;background-color:#ccc}
.tui-navbar .tui-dropdown-hover,.tui-navbar .tui-dropdown-click{position:static}
.tui-navbar .tui-dropdown-hover:hover,.tui-navbar .tui-dropdown-hover:first-child,.tui-navbar.tui-dropdown-click:hover{background-color:#ccc;color:#000}
.tui-navbar a,.tui-topnav a,.tui-sidenav a,.tui-dropnav a,.tui-dropdown-content a{text-decoration:none!important}
.tui-navbar .tui-opennav.tui-right{float:right!important}
.tui-megamenu {left:0;z-index: 1;}
.tui-dropdown-click,.tui-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.tui-dropdown-hover:hover .tui-dropdown-content{display:block;z-index:1}
.tui-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}
.tui-dropdown-content a{padding:0.375em 1em;display:block}
.tui-dropdown-content a:hover{background-color:#ccc}


Through is I can make dropdown of a Div, Image, UL, LI, span, p etc.

Now I am stuck how to do for multilevel dropdown. What should I can in it to achieve the multilevel dropdown.

For your reference I am attached here the pen.


Generic Dropdown menu[^]

What I have tried:

I have tried to incorporate the UL and LI

• Link 1
• Link 2
• Link 3
• Dropdown
  
  
  
  • Link 4
  • Link 5
  • Link 6