HTML/CSS Horizontal sub-submenu attached to vertical submenu - html

Question

I am wanting to align a vertical sub-submenu that is horizontal to a submenu, like this:
I am able to achieve this, as the picture shows, but I have to make the position absolute. The problem with that is I would want the top part of each sub-submenu to line up with the top of the submenu it is attached too. For instance, the artist sub-submenu would be exactly the same as the one shown, but would have A to Z lined up with Artist.
In order to do that the way I am doing it now, I would have to create many different css sections, rather than being able to select multiple submenus with one section (for instance #sortsongmenu, #sortartistmenu { styling }. I would like to find a way to have the sub-submenus in the position shown without having to position each sub-submenu separately, but rather have a styling approach that could apply to all sub-submenus that have relative or some other positioning.
HTML code:
<-- CSS code-->
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu li {
display: block;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}
#sortsongmenu li, #sortartistmenu li{
display: inline;
}
#sortsongmenu li a:hover, #sortartistmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home
</li>
<li>
Search
</li>
<li>
Sort By &#9660
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul id="sortsongmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Artist</a>
<ul id="sortartistmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Album</a>
</li>
<li>
<a href='#'>Genre</a>
</li>
<li>
<a href='#'>BPM</a>
</li>
<li>
<a href='#'>Release Date</a>
</li>
</ul>
</li>
<li>
Add Song
</li>
<li>
Contant Us
</li>
</ul>
</div>
</div>

Answer 1

Try:
Change
#sortmenu li {
display: block;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}
to
#sortmenu > li {
display: block;
position: relative;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
top: 0;
width: 100px;
}
EDITED:
Change top to -5px, as your sub submenu have a border top of 5px. It will look better that way.