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> Link 2</li>
<li> Link 3</li>
<li class="tui-dropdown-hover"> 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