HTML/CSS sub-submenu - html

Question

I am having a problem putting a sub-submenu into my html/css designed menu. I have attached a picture of the results that I get from the given code. If someone could point out where I'm making a mistake that would be greatly appreciated. I have looked at everything 2 times over and feel like I'm simply implementing the css incorrectly.
#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 {
display: in-line;
position: relative;
background-color: #333;
border: 5px solid #222;
border-left: 0;
margin-left: -5px;
}
#sortsongmenu li{
display: inline-block;
}
#sortsongmenu 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></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

#sortmenu li: hover ul
needs to be:
#sortmenu li:hover ul
Also under #sortsongmenu
display: in-line;
needs to be
display: none;