مشکل در ساخت منوهای تو در تو با (css(DropDown menu

سلام دوستان
من میخوام یک DropDown منو تو در تو بسازم تو ساخت منو مشکلی ندارم ولی میخوام بگم زمانی که اومد روی زیر منو hover شد زیر منو مربوط بهش رو نمایش بده و حالت display:block بشه ولی نمیشه نمیدونم چرا خودم حدس میزنم دارم اشتباره Select میکنم اون ناحیه رو تو css ولی هر طوری به ذهنم میرسید Select کردم ولی نمایش نمیده...

 <ul id="list">

        <li>

            <a href="#" class="menu">About</a>

            <div class="DropDown">

                <div class="DropDown_Arrow"></div>

                <ul class="DropDown_Container">

                    <li class="DropDown_List">Web Design</li>

                    <div id="WDSM">

                        <ul id="SubMenu">



                            <li><a href="#">Joomla</a></li>

                            <li><a href="#">Joomla</a></li>

                            <li><a href="#">Joomla</a></li>



                        </ul>

                    </div>

                    <li class="DropDown_List">Wordpress Design</li>

                </ul>

            </div>

        </li>

        <li>

/*Main Menu[Horizental menu]*/

#list > li{

    display:inline-block;

    border-right:1px solid;

    



}

.menu{

    display:inline-flex;

    text-decoration:none;

    color:#000000;

    justify-content:center;

    margin-left:27px;

    margin-right:27px;

}

.menu:hover{

    color:#00aeff;

}

ul{

 text-align:center;

  

}

/*first Drop Down Menu Style*/

.DropDown_Arrow{

    background-image:url(img/arrow.png);

    width:221px;

    height:70px;

    position:absolute;

    margin-top:-10px;

    display:none;

    

}

.DropDown_Container{

    background-color:#e2e7ed;

    width:221px;

    height:auto;

    position:absolute;

    top:120px;

    display:none;

    



}

.DropDown_List{

    font-family:'PT SANS';

    font-size:12pt;

    padding:10px 0 15px 10px;

    text-align:left;

}

.DropDown_List:hover{

    background-color:#00aeff;

    cursor:pointer;

    color:#fff;

}

#list > li:hover .DropDown_Arrow,

#list > li:hover .DropDown_Container{

    display:block;



}



/*Submenu*/

#WDSM{

    

    width:221px;

    background-color:inherit;

    position:absolute;

    left:221px;

    top:0px;

    





}

#SubMenu li{

    font-family:'PT SANS';

    font-size:12pt;

    padding:10px 0 15px 10px;



}

#SubMenu li:hover{

    background-color:#00aeff;

}

#SubMenu a{

    color:#000000;

    text-decoration:none;

    display:block;

}

#SubMenu{display:none;}

/* show SubMenu Under Submenu*/

#list .DropDown_Container > li >  #SubMenu{

    display:block;



}

لینک کامل قالب
http://uplod.ir/z4vkfafemwc8/WebSite.rar.htm

سلام
لینک حذف شده

روال کار شما اشتباهه
شما باید با Hover لیست ایتم کانتینر فرزندش (کلاس DropDown) رو نمایش بدید نه محتویات این کانتینر رو (یعنی DropDown_Arrow و DropDown_Container)
اول برای کانتینر DropDown قواعد رو تعریف کنید بصورت زیر
.DropDown
{
position:absolute;
top:30px;
display:none;
}

سایر قواعدی که برای DropDown_Arrow و DropDown_Container تعریف کردید رو پاک کنید مثلا Position - موقعیت top و display

حالا برای hover لیست ایتم دستور زیر رو بنوبسید
#list > li:hover .DropDown
{
display:block;
}

با اینکار با رفتن موس بر روی لیست ایتم سطح 1 کانتینر فرزند این لیست ایتم با کلاس DropDown نمایش داده می شود

این دستور هم کامل پاک کنید

#list > li:hover .DropDown_Arrow,
#list > li:hover .DropDown_Container{
display:block;

}