Positioning my submenus

Currently, when revealing my submenus they appear like this:

What I want is for it to appear to the right of the main menu, without changing the height of the main menu. Perhaps, something like this:

I cant seem to figure out the CSS in order to do this.

HTML Code:

<div id="sortmenu">
    <div id="sortmenu_wrapper">
        <ul>
            <li><a>Song</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Artist</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Album</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>   
            <a>Genre</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Release Date</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>Newest to Oldest</a></li><li>
                    <a href='#'>Oldest to Newest</a></li>
                </ul>
            </li><li>
            <a>BPM</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>Slowest to Fastest</a></li><li>
                    <a href='#'>Fastest to Slowest</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS Code:

#sortmenu {
background-color: #222;
width: 200px;
position: absolute;
margin-top: 15px;
margin-left: 15px;
border: 5px solid DarkBlue;
}
#sortmenu_wrapper {
width: 200px;
margin: 0 auto;
text-align: left;
}





#sortmenu ul {
list-style-type: none;
padding-left: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#sortmenu ul > li {
display: block;
width: 200px;
}
#sortmenu ul li:hover {
background-color: #333;
}
#sortmenu ul li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}

#sortmenu ul li:hover > ul {
display: block;
}


.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid DarkBlue;
border-left: 0;
margin-left: -5px;
width: 200px;
left: 100%;
margin-top: -30px;
}
.sortsubmenu > li {
display: block;
position: relative;
}
.sortsubmenu li a:hover {
color: #699;
}

Solution

Hi now define your #sortmenu ul > li position: relative; and #sortmenu ul > li ul to this

position:absolute;
        right:0;
        top:-5px;

As like this

#sortmenu ul > li {
    position: relative;
}
#sortmenu ul > li ul{
    position:absolute;
    right:0;
    top:-5px;
}

==============Demo is

#sortmenu {
background-color: #222;
width: 200px;
position: absolute;
margin-top: 15px;
margin-left: 15px;
border: 5px solid DarkBlue;
}
#sortmenu_wrapper {
width: 200px;
margin: 0 auto;
text-align: left;
}





#sortmenu ul {
list-style-type: none;
padding-left: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#sortmenu ul > li {
display: block;
width: 200px;
    position: relative;
}
#sortmenu ul > li ul{
    position:absolute;
    right:0;
    top:-5px;
}
#sortmenu ul li:hover {
background-color: #333;
}
#sortmenu ul li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}

#sortmenu ul li:hover > ul {
display: block;
}


.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid DarkBlue;
border-left: 0;
margin-left: -5px;
width: 200px;
left: 100%;
margin-top: -30px;
}
.sortsubmenu > li {
display: block;
position: relative;
}
.sortsubmenu li a:hover {
color: #699;
}

<div id="sortmenu">
    <div id="sortmenu_wrapper">
        <ul>
            <li><a>Song</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Artist</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Album</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>   
            <a>Genre</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Release Date</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>Newest to Oldest</a></li><li>
                    <a href='#'>Oldest to Newest</a></li>
                </ul>
            </li><li>
            <a>BPM</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>Slowest to Fastest</a></li><li>
                    <a href='#'>Fastest to Slowest</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>