تخفیف شگفت‌انگیز: تا 50٪ تخفیف روی تمام دوره‌ها!
پایان تخفیف تا:
مشاهده دوره‌ها
  1. توسینسو
  2. سوالات
  3. طراحی سایت و سئو
  4. ..::مشکل در ساخت DropDown منو::..
0

..::مشکل در ساخت DropDown منو::..

سلام دوستان

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

Code
 <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>
Code
/*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.irz4vkfafemwc8WebSite.rar.htm

اینم لینک کامل قالب

پرسیده شده در 1394/11/01 توسط
آواتار jjjjjjj spam

1 پاسخ

1

سلام Itpro ای عزیز

من کد شما رو به شکل زیر تغییر دادم

در برخی قسمت ها ایرادی داشتید که برطرف شد برای مثال تگ ul اولی رو نبسته بودید و همچنین یک سری مشکلات در Css داشتید ک برطرف شد.

Code
 #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;
 
}*/
.DropDown_List:hover #WDSM,
.DropDown_List:hover #SubMenu {
    display: block;
}
Code
<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
                   <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>
                <li class="DropDown_List">Wordpress Design</li>
            </ul>
<!--        </div>-->
    </li>
    </ul>
پاسخ در 1394/11/01 توسط
آواتار مهدی عادلی فر

پاسخ شما