Tanmoy banerjee Ответов: 0

Общий выпадающий список для HTML-элемента

Уважаемый друг,

Я хочу разработать общее выпадающее меню для любого HTML-элемента, такого как ручка, прикрепленная здесь.
Мой HTML это : 
<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>


& мой CSS-код

.туи-навигации{список-стиль-тип:нет;маржа:0;обивка:0;переполнения:скрытый}
.туи-навигации батарея Li{плавать:слева}.туи-навигации ли а{дисплей:блок;обивка:.5em 1эм}.туи-навигации батарея li:hover{цвет:#000;фон-цвет:#КТС}
.туи-навигации .туи-в выпадающем списке при наведении курсора,.туи-навигации .туи-выпадающего-нажмите кнопку{позицию:статические}
.туи-навигации .туи-выпадающий-парить:парить,.туи-навигации .tui-dropdown-hover:first-child,.tui-navbar.tui-dropdown-click:hover{background-color:#ccc;color:#000}
.туи-панели, а.туи-topnav а.туи-sidenav а.туи-dropnav а.туи-выпадающий-содержание в{текст-отделка:нет!важно}
.туи-навигации .туи-opennav.туи-правый{поплавок:справа!важно}
. tui-megamenu {слева: 0;z-индекс: 1;}
.туи-выпадающего-кнопкой.туи-выпадающий-наведите{должность:относительная;дисплей:встроенный блок;курсора:указатель}
.туи-выпадающий-парить:парить .туи-выпадающий-содержание{дисплей:блок;Z-индекса: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.375 em 1em;display:block}
.туи-выпадающий-содержание:наведите{цвет фона:#КТС}


Через это я могу сделать выпадающий список Div, Image, UL, LI, span,p и т. д.

Теперь я застрял, как это сделать для многоуровневого выпадающего списка. Что я должен сделать в нем, чтобы добиться многоуровневого выпадающего списка.

Для вашей справки я прилагаю сюда ручку.


Универсального выпадающего меню[^]

Что я уже пробовал:

Я попытался включить UL и LI

  • Ссылка 1
  • Ссылка 2
  • Ссылка 3
  • Выпадающий

    • Ссылка 4
    • Ссылка 5
    • Ссылка 6

0 Ответов