( H T M L ) <ul id="***"> <li><a href="#">*****</a></li> <li><a href="#">******</a> <ul> <li> <li><a href="#">********</a> <ul> <li> <li><a href="#">*******</a></li> <li><a href="#">******</a></li> </ul> </li> <li><a href="#">*******</a> <ul> <li><a href="#">*******</a></li> <li><a href="#">******</a></li> </ul> </li> </ul> </li> <li><a href="#">*******</a> <ul> <li><a href="#">*******</a>/li> <li><a href="#">******</a></li> <li><a href="#">******</a></li> <li><a href="#">******</a></li> <li><a href="#">******</a></li> </ul> </li> <li><a href="#">******</a></li> <li><a href="#">*******</a> <ul> <li><a href="#">*****</a></li> <li><a href="#">******</a></li> </ul> </li> <li><a href="#">*****</a> <ul> <li><a href="#">*******</a></li> <li><a href="#">*******</a></li> </ul> </li> <li><a href="#">******</a> <ul> <li><a href="#">*****</a></li> <li><a href="#">******</a></li> </ul> </li> <li><a href="#">******</a> <ul> <li><a href="#">******</a> <ul> <li><a href="#">*******</a></li> </ul> </li> <li><a href="#">******</a> <ul> <li><a href="#">******</a></li> <li><a href="#">******</a></li> <li><a href="#">******</a></li> </ul> </li>

( C S S ) #v, #v ul { padding: 0; margin: 0; list-style: none; width:150px; } #v li { position: relative-float; width: 10em; } #v a { display: block; font-size: 20px; text-align: center; color: #990000; width: 2em; } #v li ul { margin: -2em 0 0 5em; left: -999em; width: 10em; position: absolute; font-size: 20px; } #v li ul ul { margin: -2em 0 0 5em; font-size: 20px; } #v li:hover ul { left: auto; } #v li:hover ul ul, #v li.sfhover ul ul { left: -999em; } #v ul li li:hover ul { left: 150px; top: 0; } #v li:hover ul, #v li li:hover ul, #v li.sfhover ul, #v li li.sfhover ul { left: auto; }