Многоуровневый парящий CSS

Попытка работать над многоуровневым зависанием, поэтому предпосылкой моего кода является наведение на Linea Pro 4, показывающее iPod и iPhone, затем наведите указатель мыши на iPod или iPhone, показывающие различные типы продуктов, а затем наведите указатель мыши на тип отображения продукта номер детали.

Я попробовал несколько вариантов CSS, чтобы заставить его работать... и я знаю, что мне нужно пройти долгий путь, поэтому любая стартовая помощь будет оценена... вот мой CSS, за которым следует мой HTML-код

CSS CODE

#ipc_cases ul {list-style-type: none; display: inline-block;}
#ipc_cases ul li > ul{display:none; background: rgb(213, 213, 213)}
#ipc_cases ul li ul li > ul {display:none;}
#ipc_cases li:hover > ul{display: inline-block;}

HTML CODE

<div id="ipc_cases">
 <ul>
 <li>Linea Pro 4
 <ul>
 <li>iPod
 <ul><li>Rugged Case for LP4-POD4 (iPod) GRAY/BLACK, 1D Scanner No MSR
 <ul><li>CS-R-LP4-POD4-G/BK</li></ul>
 </li>
 <li>Rugged Case for LP4-POD4 (iPod) GRAY/BLACK, 1D Scanner with MSR
 <ul><li>CS-RMS-LP4-POD4-G/BK</li></ul>
 </li>
 <li>Rugged Case for LP4C2D-POD4 (iPod) GRAY/BLACK, 2D Scanner No MSR
 <ul><li>CS-R-LP4C2D-POD4-G/BK</li></ul>
 </li>
 <li>Rugged Case for LP4C2D-POD4 (iPod) GRAY/BLACK, 2D Scanner with MSR
 <ul><li>CS-RMS-LP4C2D-POD4-G/BK</li></ul>
 </li>
 </ul>
 </li>

 <li>iPhone
 <ul><li>Rugged Case for LP4-PH4 (iPhone) GRAY/BLACK, 1D Scanner No MSR
 <ul><li>CS-R-LP4-PH4-G/BK</li></ul>
 </li>
 <li>Rugged Case for LP4-PH4 (iPhone) GRAY/BLACK, 1D Scanner with MSR
 <ul><li>CS-RMS-LP4-PH4-G/BK</li></ul>
 </li>
 <li>Rugged Case for LP4C2D-PH4 (iPhone) GRAY/BLACK, 2D Scanner No MSR
 <ul><li>CS-R-LP4C2D-PH4-G/BK</li></ul>
 </li>
 <li>Rugged Case for LP4C2D-PH4 (iPhone) GRAY/BLACK, 2D Scanner with MSR
 <ul><li>CS-RMS-LP4C2D-PH4-G/BK</li></ul>
 </li>
 </ul>
 </li>

 </ul>
 </li>

 </ul>
 </div>
1 ответ

Он должен работать так, как вы хотите, если вы используете дочерний комбинатор между li:hover и ul в этом конечном селекторе:

#ipc_cases li:hover > ul {
 display: block;
}

Раньше, с отсутствием детского комбинатора, li:hover ul расширяет всех потомков, что и заставило все появиться, когда вы нависли на первом уровне. Используя дочерний комбинатор, каждый зависающий li только показывает ul которые находятся непосредственно под ним в DOM.

licensed under cc by-sa 3.0 with attribution.