Multi level dropdown accessibility improvements

Question

I am trying to create a multi level drodown menu with the following code:

<nav role="navigation" class="navigation">
    <ul>
        <li><a href="index.html">Home</a>

        </li>
        <li><a href="about.html">About</a>

            <ul>
                <li><a href="company.html">Company</a>
                    <ul>
                        <li><a href="#">Brands</a></li>
                        <li><a href="#">Stuff</a></li>
                        <li><a href="#">More Stuff</a></li>
                    </ul>
                </li>
                <li><a href="team.html">Team</a>

                </li>
                <li><a href="goals.html">Goals</a>

                </li>
                <li><a href="photos.html">Photos</a>

                </li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a>

            <ul>
                <li><a href="company.html">Chairs</a>

                </li>
                <li><a href="team.html">Beds</a>

                </li>
                <li><a href="goals.html">Fireplace</a>

                </li>
                <li><a href="photos.html">Onother</a>

                </li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a>

        </li>
    </ul>
</nav>

With some jQuery I have hidden all the second/third level items and added a class that will show a "+" in the right side via CSS.

Demo: http://jsfiddle.net/ZJug9/1/

This works fine for most users, but when I try to use this with VoiceOver on Mac I just can't simply find a way to navigate. Maybe because I don't know all the things about VoiceOver or I am doing something wrong with HTML and JS

Is there something missing from my code that could improve accessibility for blind people using screen readers. What should I do more and why for this particular example.

Any up to date tools or documentation that will put me up to speed about accessibility. I think that the W3C accessibility website is too cluttered and confusing. I read some things about Aria too, but the documentation is really complicated and some people say that using proper markup is good enough.

Please try to answer for this example

UPDATE I added visibility hidden to the hidden ul's as the screen reader does not speak invisible elements and I will still be able to use CSS3 for the height transition Demo 2: http://jsfiddle.net/ZJug9/3/