I would like to make a vertical menu off the following items.

<ul>
 <li><a href="">Item1</a></li>
 <ul> 
 <li><a href="">Item1.1</a></li>
 <li><a href="">Item1.2</a></li>
 </ul>
 <li><a href="">Item2</a></li>
 <li><a href="">Item3</a></li>
 <ul> 
 <li><a href="">Item3.1</a></li>
 <li><a href="">Item3.2</a></li>
 <li><a href="">Item3.3</a></li>
 </ul>
 <li><a href="">Item4</a></li>
</ul>

But i would like to only see the items of the first order (so 1,2,3,4). The other items 1.1 and 1.2 for instance should only be visible when you hover over item 1.

So the normal view would be
Item 1
Item 2
Item 3
Item 4

When your mouse is at the position of item 1 this should become;
Item 1
Item 1.1
Item 1.2
Item 2
Item 3
Item 4

And i would like this to be in the same box as the other mainitems only with a small indent.

And when your mouse is no longer over item1 it should become normal view again.

I already did some research and found that you have to do this with havascript. But i didnt found any simple code that i can understand.

Little help please, aspecially with the javascript.