css menu ad albero

[aquatimer2000]

Ciao a tutti,

ho un menu ad albero di questo tipo:

<ul>
    <li>root
        <ul>
            <li>menu1
                <ul>
                    <li>menu 1.1</li>
                    <li>menu 1.2</li>
                </ul>
            </li>
            <li>menu2
                <ul>
                    <li>menu 2.1</li>
                    <li>menu 2.2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

come posso fare per stampare i rami dell'albero, con bordi dot?

Ho provato ad utilizzare border-bottom e border-left sui tag <li> ma il risultato è davvero brutto.

li {
    border-left: 1px dotted;
    border-bottom: 1px dotted;
}

il resto della pagina html non ha css, devo solo stampare una list item simile a questa (con molte più voci) ed avere la possibilità di vedere le linee orizzontali e verticali dei rami.

Il menu deve essere sempre "esploso" non ho bisogno di aprire/chiudere i vari elementi..