Multi-Level hovering CSS

Multi-Level hovering CSS

Trying to work on multi-level hovering, so the premise behind my code is
to hover over Linea Pro 4 showing iPod and iPhone, then hover over either
iPod or iPhone showing the different types of products, and then hovering
over the type of product displaying the part number.
I have tried several CSS variations to get it to work... and I know I have
a long way to go, so any starting help would be appreciated... here is my
CSS followed by my HTML code
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_case li:hover ul{display: block;}
HTML CODE
<div id="ipc_cases">
<ul>
<li><a>Linea Pro 4</a>
<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>