Css menu sorunu lütfen yardim

Merhabalar sol menümde menü içine submenü yapmaya çalışıyorum görünümde sıkıntı yok fakat ikinci menüye tıkladığımda tüm hepsi kapanıyor. Aşağıdaki şekilde yapıyorum acaba nerde yanlış yapıyorum lütfen yardım. Bana yardımcı olan arkadaşa temayı verebilirim gayet güzel bir temadır.

            <div class="single-menu">
                <h2><a title=""><i class="fa fa-desktop"></i><span>Ana Menü</span></a><i class="blue">3</i></h2>
                <div class="sub-menu">
                    <div class="single-menu2">
                        <h2><a title=""><i class="fa fa-desktop"></i><span>Alt Menü</span></a><i class="blue">10</i></h2>
                        <div class="sub-menu2">
                            <ul>                               
                                <li id="Li9" runat="server"><a tabindex="-1" href="Forms/Tanimlamalar/SubeTanimlama.aspx">ALT MENÜYE AİT LİNK</a></li>
                                <li id="Li10" runat="server"><a tabindex="-1" href="Forms/Tanimlamalar/PersonelGorevTanimlama.aspx">ALT MENÜYE AİT LİNK</a></li>
                                <li id="Li11" runat="server"><a tabindex="-1" href="Forms/Tanimlamalar/PersonelTanimlama.aspx">ALT MENÜYE AİT LİNK</a></li>
                                <li id="Li12" runat="server"><a tabindex="-1" href="Forms/Tanimlamalar/KullaniciGrupTanimlama.aspx">ALT MENÜYE AİT LİNK</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

.single-menu > h2 > a {
    padding: 20px;
}
.single-menu > h2 > a > i {
    float: left;
    font-size: 20px;
    text-align: center;
    width: 100%;
}
.single-menu > h2 > a > span {
    background: none repeat scroll 0 0 #383c42;
    
	-webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    -ms-border-radius: 0 4px 4px 0;
    -o-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
	
    left: 100%;
    margin-top: -6px;
    opacity: 0;
    padding: 10px 13px;
    position: absolute;
	
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
    
	-webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
	
    width: 150px;
	z-index: 99999;
}
.single-menu > h2 > a:hover > span {
    opacity: 1;
	
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.single-menu > h2.active {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    -ms-border-radius: 4px 0 0 4px;
    -o-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.single-menu {
    float: left;
    position: relative;
    width: 100%;
}
.single-menu > h2 > i {
    left: 0;
    margin-top: -11px;
    right: auto;
    top: 0;
}

.sub-menu {
    padding: 10px;
}
.sub-menu > ul > li > a {
    line-height: 25px;
    padding: 0;
    text-align: center;
    width: 100%;
}
.sub-menu > ul > li > a {
    font-size: 12px;
    overflow: hidden;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sub-menu > ul > li > a:before {
    display: none;
}
.sub-menu > ul > li span {
    display: none;
}
.sub-menu > ul > li > a:hover {
    padding: 0;
}
.sub-menu {
    -webkit-border-radius: 0 4px 4px;
    -moz-border-radius: 0 4px 4px;
    -ms-border-radius: 0 4px 4px;
    -o-border-radius: 0 4px 4px;
    border-radius: 0 4px 4px;
	
    left: 100%;
    margin: 0;
    position: absolute;
    width: 400px;
    z-index: 9999;
}
.sub-menu:before {
    display: none;
}
.sub-menu > ul > li {
    width: 50%;
}