Show sub sub menu when mouse is hover

Question

i have this code: http://jsfiddle.net/7Zr44/

And i want to show the sub sub menu the mouse hover.

the display:block is not doing nothing

<ul class="tonho">
<li><a href="">Menu 1</a>

    <ul class="tonho"><li><a href="">Sub 1.1</a>
        </li>
        <li><a href="">Sub 1.2</a></li><li><a href="">Sub 1.3</a>
        </li>
    </ul>
</li>
<li><a href="">Menu 2</a>
            <ul class="tonho"><li><a href="">Sub 2.1</a>
            <ul class="tonho"><li><a href="">Sub Sub 2.1.1</a>
                </li>
                </ul>                 
                </li>
                <li><a href="">Sub 2.2</a></li>
</ul>
</li>
<li><a href="">Menu 3</a></li>

Edit: I can't give level 1, 2 etc to the because this menu is being generated by PHP + SQL script.

Answer 1

You need to unhide the li tag and show only next level of Ul. like this : Demo

.tonho li:hover > ul {
    display: block;
}