CSS Spry problem

Hello! By the way thanks for the website it's more than awesome!

I'm trying to edit the menu on the sushihanii template.. I was wanting to add additional spry, but the submenus only go out beside the "Menu" button.

Original Code:

Code:

                <div id="navigation">
                    <ul>
                        <li class="selected">
                            <a href="index.html">Home</a>
                        </li>
                        <li class="menu">
                            <a href="menu.html">Menu</a>
                            <div class="sub">
                                <a href="menu.html">Lorem Ipsum</a> <a href="menu.html">Dolor Sit Amet</a> <a href="menu.html">Nulla Pretium</a> <a href="menu.html" class="last-child">Curabitur</a>
                            </div>
                            <span></span>
                        </li>
                        <li>
                            <a href="blog.html">Blog</a>
                        </li>
                        <li class="last">
                            <a href="about.html">About</a>
                        </li>
                    </ul>
                </div>

Altered Code:

Code:

                <div id="navigation">
                    <ul>
                        <li class="selected">
                            <a href="index.html">Home</a>
                        </li>
                        <li class="menu">
                            <a href="menu.html">Menu</a>
                            <div class="sub">
                                <a href="menu.html">Lorem Ipsum</a> <a href="menu.html">Dolor Sit Amet</a> <a href="menu.html">Nulla Pretium</a> <a href="menu.html" class="last-child">Curabitur</a>
                            </div>
                            <span></span>
                        </li>
                        <li class="menu">
                            <a href="menu.html">Additional</a>
                            <div class="sub">
                                <a href="menu.html">etc</a> <a href="menu.html">blah</a> <a href="menu.html">yadda</a> <a href="menu.html" class="last-child">weee</a>
                            </div>
                            <span></span>
                        </li>
                        <li class="menu">
                            <a href="menu.html">OneMore</a>
                            <div class="sub">
                                <a href="menu.html">Bleh</a>  <a href="menu.html" class="last-child">Okay you get it</a>
                            </div>
                            <span></span>
                        </li>
                        <li class="last">
                            <a href="about.html">About</a>
                        </li>
                    </ul>
                </div>

How can I make it so when the button is hovered on these additional menu items, that the box appears to the right of the button being hovered over - instead of always coming out beside the first spry button 'Menu'

Thanks!

 

Hey I was still wondering if anybody could help? Still have not figured this easy (should be) problem out.