سلام دوستان
من میخوام یک 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