• پایان فعالیت بخشهای انجمن: امکان ایجاد موضوع یا نوشته جدید برای عموم کاربران غیرفعال شده است

مشکل قرار دادن زیر منو

Mr.ErrO.or

کاربر تازه وارد
تاریخ عضویت
15 مارس 2014
نوشته‌ها
17
لایک‌ها
2
با سلام خدمت دوستان عزیز

یک منویی هست که زیر منو داره ولی دیگه زیرمنوهاش ، زیر منو نداره ...

هر کاری کردم نتونستم درستش کنم .


منظورم قسمت children هست که سی اس اس اینجاش رو نتونستم درست کنم :

کد:
   <ul class="children">
                       <li><a href="#">222222222</a></li>
                       <li><a href="#">222222222</a></li>
                       <li><a href="#">222222222</a></li>
                       <li><a href="#">222222222</a></li>
  </ul>


کد کامل html همراه با Css :
کد:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head> 
<meta charset="utf-8">
<title>MENU</title>


<style>
.menu, .menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
height: 58px;
}
.menu li {
background: -moz-linear-gradient(#292929, #252525);
background: -ms-linear-gradient(#292929, #252525);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
background: -webkit-linear-gradient(#292929, #252525);
background: -o-linear-gradient(#292929, #252525);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
background: linear-gradient(#292929, #252525);
border-bottom: 2px solid #181818;
border-top: 2px solid #303030;
min-width: 160px;
}
.menu > li {
display: block;
float: right;
position: relative;
}
.menu > li:first-child {
}
.menu a {
border-right: 3px solid rgba(0, 0, 0, 0);
color: #808080;
display: block;
font-family: 'B Yekan';
font-size: 18px;
line-height: 54px;
padding: 0 15px;
text-decoration: none;
text-transform: uppercase;
text-align:right;
}
.menu li:hover {
background-color: #1c1c1c;
background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
background: -o-linear-gradient(#1c1c1c, #1b1b1b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
background: linear-gradient(#1c1c1c, #1b1b1b);
border-bottom: 2px solid #222222;
border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
border-radius: 5px 0 0 0;
border-right: 3px solid #C4302B;
color: #C4302B;
}
/* submenu styles */
.submenu {
right: 0;
max-height: 0;
position: absolute;
top: 100%;
z-index: 0;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
.submenu li {
opacity: 0;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transition: opacity .4s, -webkit-transform .5s;
-moz-transition: opacity .4s, -moz-transform .5s;
-ms-transition: opacity .4s, -ms-transform .5s;
-o-transition: opacity .4s, -o-transform .5s;
transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
border-left: 3px solid #454545;
border-radius: 0;
color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
max-height: 2000px;
z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
-webkit-transition-delay: 350ms;
-moz-transition-delay: 350ms;
-ms-transition-delay: 350ms;
-o-transition-delay: 350ms;
transition-delay: 350ms;
}
.submenu li:nth-child(1) {
-webkit-transition-delay: 350ms;
-moz-transition-delay: 350ms;
-ms-transition-delay: 350ms;
-o-transition-delay: 350ms;
transition-delay: 350ms;
}
.submenu li:nth-child(2) {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.submenu li:nth-child(3) {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.submenu li:nth-child(4) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.submenu li:nth-child(5) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.submenu li:nth-child(6) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.submenu li:nth-child(7) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.submenu li:nth-child(8) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
</style>




</head>
<body>


<ul class="menu">
<li><a href="#">خانه</a></li>
<li><a href="#s1">موضوع اول</a>
<ul class="submenu">
<li><a href="#">زیر مجموعه</a>
<ul class="children">
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
</ul>
</li>

<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
</ul>
</li>
<li class="active"><a href="#s2">موضوع دوم</a>
<ul class="submenu">
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
</ul>
</li>
<li><a href="#">موضوع سوم</a>
<ul class="submenu">
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
</ul>
</li>
<li><a href="#">موضوع چهارم</a></li>
</ul>



</body>
</html>

میخوام با همون افکت که باز میشن زیرمنوهاشم همونطوری باز بشن.



ممنون میشم کمک کنید.
 

Mr.ErrO.or

کاربر تازه وارد
تاریخ عضویت
15 مارس 2014
نوشته‌ها
17
لایک‌ها
2
از اساتید کسی نیست ما رو راهنمایی کنند؟ خیلی نیاز دارم به این کد
 

Mr.ErrO.or

کاربر تازه وارد
تاریخ عضویت
15 مارس 2014
نوشته‌ها
17
لایک‌ها
2
بله برای زیر منوهاش میخوام زیر منو قرار بدم ولی هر کاری کردم درست نشد.
 

hanijafari

Registered User
تاریخ عضویت
20 آگوست 2012
نوشته‌ها
1,295
لایک‌ها
567
ببخشید من متوجه نشدم
الان شما میخواهید برای زیر منوی children زیر منو اضافه کنید؟
 

Mr.ErrO.or

کاربر تازه وارد
تاریخ عضویت
15 مارس 2014
نوشته‌ها
17
لایک‌ها
2
در کد بالا children زیر منوی ، زیر مجموعه است که خود هم زیرمنو حساب میشه.
یعنی به عبارتی children زیر منوی دوم است.

به این صورت
- موضوع اول
-------------- زیر مجموعه
-------------------------------- 22222222222
 

hanijafari

Registered User
تاریخ عضویت
20 آگوست 2012
نوشته‌ها
1,295
لایک‌ها
567
تا اونجا که من میدونم به صورت استاندارد شدنی نیست.
بهتره دسته بندی را طوری تنظیم کنید که زیرمنوها کمتر بشه.
اگر آن هستی یکم بمونی برات بزارم ، اما امکان داره تو قالبت ارور بگیری؟ مهم نیست؟
ظاهر سایتت به هم نمیریزه ، اما تو ولیدیتورها ارور میگیری؟
یعنی کمیت را فدای کیفیت میکنید؟
این دیگه بستگی به خودتون داره
 

Mr.ErrO.or

کاربر تازه وارد
تاریخ عضویت
15 مارس 2014
نوشته‌ها
17
لایک‌ها
2
دلیل زیر منو در زیر منو هم به خاطر موضوعات زیاده که میخوام انجام بدم.
حالا شما بی زحمت لطف کنید زیر منو قرار بدید روش کار میکنم ولید میکنم.
فقط زیر منو داخلش زیر منو باشه بقیش حل میشه
 

hanijafari

Registered User
تاریخ عضویت
20 آگوست 2012
نوشته‌ها
1,295
لایک‌ها
567
فقط یه چیز رو بهم بگو تا تمومش کنم.
همه زیر منوهای 222222 زیر منو داشته باشن یا فقط یکی کافی هست؟
 

homayo0on

Registered User
تاریخ عضویت
25 آگوست 2011
نوشته‌ها
555
لایک‌ها
620
دوست عزیز توقع زیادی نیست که از دوستان درخواست ادیت کدی به این طولانی رو داشته باشید بدون هیچ عجر و مزدی..؟ (شوخی)

یه ادیت ساده زدم هزار تا ساب هم بزنی برات میاره.

HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <title>MENU</title>
        <style type="text/css">
        .menu, .menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .menu {
            height: 58px;
        }
        .menu li {
            background: -moz-linear-gradient(#292929, #252525);
            background: -ms-linear-gradient(#292929, #252525);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
            background: -webkit-linear-gradient(#292929, #252525);
            background: -o-linear-gradient(#292929, #252525);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
            background: linear-gradient(#292929, #252525);
            border-bottom: 2px solid #181818;
            border-top: 2px solid #303030;
            min-width: 160px;
        }
        .menu > li {
            display: block;
            float: right;
            position: relative;
        }
        .menu > li:first-child {
        }
        .menu a {
            border-right: 3px solid rgba(0, 0, 0, 0);
            color: #808080;
            display: block;
            font-family: 'B Yekan';
            font-size: 18px;
            line-height: 54px;
            padding: 0 15px;
            text-decoration: none;
            text-transform: uppercase;
            text-align:right;
        }
        .menu li:hover {
            background-color: #1c1c1c;
            background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
            background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
            background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
            background: -o-linear-gradient(#1c1c1c, #1b1b1b);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
            background: linear-gradient(#1c1c1c, #1b1b1b);
            border-bottom: 2px solid #222222;
            border-top: 2px solid #1B1B1B;
        }
        .menu li:hover > a {
            border-radius: 5px 0 0 0;
            border-right: 3px solid #C4302B;
            color: #C4302B;
        }
        /* submenu styles */
        .submenu,
        .children {
            position: absolute;
            -webkit-perspective: 400px;
            -moz-perspective: 400px;
            -ms-perspective: 400px;
            -o-perspective: 400px;
            perspective: 400px;
        }
        .submenu {
            right: 0;
            max-height: 0;
            top: 100%;
            z-index: 0;
        }
        .children {
            right: 160px;
            top: 0;
        }
        .children li,
        .submenu > li {
            position:relative;
            opacity: 0;
            -webkit-transform: rotateY(90deg);
            -moz-transform: rotateY(90deg);
            -ms-transform: rotateY(90deg);
            -o-transform: rotateY(90deg);
            transform: rotateY(90deg);
            -webkit-transition: opacity .4s, -webkit-transform .5s;
            -moz-transition: opacity .4s, -moz-transform .5s;
            -ms-transition: opacity .4s, -ms-transform .5s;
            -o-transition: opacity .4s, -o-transform .5s;
            transition: opacity .4s, transform .5s;
        }
        .menu .submenu li:hover > a {
            border-left: 3px solid #454545;
            border-radius: 0;
            color: #ffffff;
        }
        .menu > li:hover .submenu, .menu > li:focus .submenu {
            max-height: 2000px;
            z-index: 10;
        }
        .menu > li:hover .submenu > li,
        .menu > li:focus .submenu > li,
        .submenu li:hover > ul > li {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
        /* CSS3 delays for transition effects */
        .menu li:hover .submenu li:nth-child(1) {
            -webkit-transition-delay: 0s;
            -moz-transition-delay: 0s;
            -ms-transition-delay: 0s;
            -o-transition-delay: 0s;
            transition-delay: 0s;
        }
        .menu li:hover .submenu li:nth-child(2) {
            -webkit-transition-delay: 50ms;
            -moz-transition-delay: 50ms;
            -ms-transition-delay: 50ms;
            -o-transition-delay: 50ms;
            transition-delay: 50ms;
        }
        .menu li:hover .submenu li:nth-child(3) {
            -webkit-transition-delay: 100ms;
            -moz-transition-delay: 100ms;
            -ms-transition-delay: 100ms;
            -o-transition-delay: 100ms;
            transition-delay: 100ms;
        }
        .menu li:hover .submenu li:nth-child(4) {
            -webkit-transition-delay: 150ms;
            -moz-transition-delay: 150ms;
            -ms-transition-delay: 150ms;
            -o-transition-delay: 150ms;
            transition-delay: 150ms;
        }
        .menu li:hover .submenu li:nth-child(5) {
            -webkit-transition-delay: 200ms;
            -moz-transition-delay: 200ms;
            -ms-transition-delay: 200ms;
            -o-transition-delay: 200ms;
            transition-delay: 200ms;
        }
        .menu li:hover .submenu li:nth-child(6) {
            -webkit-transition-delay: 250ms;
            -moz-transition-delay: 250ms;
            -ms-transition-delay: 250ms;
            -o-transition-delay: 250ms;
            transition-delay: 250ms;
        }
        .menu li:hover .submenu li:nth-child(7) {
            -webkit-transition-delay: 300ms;
            -moz-transition-delay: 300ms;
            -ms-transition-delay: 300ms;
            -o-transition-delay: 300ms;
            transition-delay: 300ms;
        }
        .menu li:hover .submenu li:nth-child(8) {
            -webkit-transition-delay: 350ms;
            -moz-transition-delay: 350ms;
            -ms-transition-delay: 350ms;
            -o-transition-delay: 350ms;
            transition-delay: 350ms;
        }
        .submenu li:nth-child(1) {
            -webkit-transition-delay: 350ms;
            -moz-transition-delay: 350ms;
            -ms-transition-delay: 350ms;
            -o-transition-delay: 350ms;
            transition-delay: 350ms;
        }
        .submenu li:nth-child(2) {
            -webkit-transition-delay: 300ms;
            -moz-transition-delay: 300ms;
            -ms-transition-delay: 300ms;
            -o-transition-delay: 300ms;
            transition-delay: 300ms;
        }
        .submenu li:nth-child(3) {
            -webkit-transition-delay: 250ms;
            -moz-transition-delay: 250ms;
            -ms-transition-delay: 250ms;
            -o-transition-delay: 250ms;
            transition-delay: 250ms;
        }
        .submenu li:nth-child(4) {
            -webkit-transition-delay: 200ms;
            -moz-transition-delay: 200ms;
            -ms-transition-delay: 200ms;
            -o-transition-delay: 200ms;
            transition-delay: 200ms;
        }
        .submenu li:nth-child(5) {
            -webkit-transition-delay: 150ms;
            -moz-transition-delay: 150ms;
            -ms-transition-delay: 150ms;
            -o-transition-delay: 150ms;
            transition-delay: 150ms;
        }
        .submenu li:nth-child(6) {
            -webkit-transition-delay: 100ms;
            -moz-transition-delay: 100ms;
            -ms-transition-delay: 100ms;
            -o-transition-delay: 100ms;
            transition-delay: 100ms;
        }
        .submenu li:nth-child(7) {
            -webkit-transition-delay: 50ms;
            -moz-transition-delay: 50ms;
            -ms-transition-delay: 50ms;
            -o-transition-delay: 50ms;
            transition-delay: 50ms;
        }
        .submenu li:nth-child(8) {
            -webkit-transition-delay: 0s;
            -moz-transition-delay: 0s;
            -ms-transition-delay: 0s;
            -o-transition-delay: 0s;
            transition-delay: 0s;
        }
        </style>
    </head>
    <body>

        <ul class="menu">
            <li><a href="#">خانه</a></li>
            <li>
                <a href="#s1">موضوع اول</a>
                <ul class="submenu">
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                        <li>
                            <a href="#">...زير مجموعه</a>
                            <ul class="children">
                                <li><a href="#">زیر مجموعه دوم</a></li>
                                <li><a href="#">زیر مجموعه دوم</a></li>
                                <li>
                                    <a href="#">...زیر مجموعه دوم</a>
                                    <ul class="children">
                                        <li><a href="#">زیر مجموعه سوم</a></li>
                                        <li><a href="#">زیر مجموعه سوم</a></li>
                                        <li><a href="#">زیر مجموعه سوم</a></li>
                                        <li><a href="#">زیر مجموعه سوم</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">زیر مجموعه دوم</a></li>
                            </ul>
                        </li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                </ul>
            </li>
            <li class="active">
                <a href="#s2">موضوع دوم</a>
                <ul class="submenu">
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                </ul>
            </li>
            <li>
                <a href="#">موضوع سوم</a>
                <ul class="submenu">
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                    <li><a href="#">زير مجموعه</a></li>
                </ul>
            </li>
            <li><a href="#">موضوع چهارم</a></li>
        </ul>

    </body>
</html>

با صحبت های دوست عزیزمون @hanijafari کاملاً موافقم.
کلا کد استانداردی نیست از هر لحاظ چون هر مرورگر یه جور باهاش برخورد میکنه و همینطور چندان ولید نیست.
 
Last edited:

hanijafari

Registered User
تاریخ عضویت
20 آگوست 2012
نوشته‌ها
1,295
لایک‌ها
567
بفرما برادر
من اینو برات زدم ، فقط زحمت تنظیماتش (سی اس اس) با خودت
میتونی از همین الگو برداری و برای خودت به تعدا کافی زیر منو بندازی و حال کنی:general406::D
مشکل ولید هم نداره و اوکی هست;)

HTML:
<ul>
   <li><a href="#">منو</a>
      <ul>
         <li><a href="#">children</a>
            <ul>
               <li><a href="#">2222222</a>
               <ul>
         <li><a href="#">111111</a>
            <ul>
               <li><a href="#">000000</a></li>
               <li><a href="#">000000</a></li>
            </ul>
         </li>
         <li><a href="#">111111</a></li>
         <li><a href="#">111111</a></li>
      </ul></li>
               <li><a href="#">222222</a></li>
            </ul>
         </li>
         <li><a href="#">children2</a></li>
         <li><a href="#">children3</a></li>
      </ul>
   </li>
   <li><a href="#">منو2</a></li>
</ul>
 

Mr.ErrO.or

کاربر تازه وارد
تاریخ عضویت
15 مارس 2014
نوشته‌ها
17
لایک‌ها
2
تشکر از @homayo0on عزیز .
یه مشکلی هست که اگر چند زیر منو زیر هم باشند. زیر منوی های دومش رو که میری روش یهو میپره رو children زیر منوی بعدیش.

موس رو یکی یکی روی زیر منو ها (منظورم children ها ) ببرید. اولیش رو درست انتخاب میکنه ولی وقتی میره روی دومیش یهو children های زیر منوی بعدیش رو نشون میده.

این کد رو ببینید :

HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
  <meta charset="utf-8">
  <title>MENU</title>
  <style type="text/css">
  .menu, .menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
  .menu {
  height: 58px;
  }
  .menu li {
  background: -moz-linear-gradient(#292929, #252525);
  background: -ms-linear-gradient(#292929, #252525);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
  background: -webkit-linear-gradient(#292929, #252525);
  background: -o-linear-gradient(#292929, #252525);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
  background: linear-gradient(#292929, #252525);
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030;
  min-width: 160px;
  }
  .menu > li {
  display: block;
  float: right;
  position: relative;
  }
  .menu > li:first-child {
  }
  .menu a {
  border-right: 3px solid rgba(0, 0, 0, 0);
  color: #808080;
  display: block;
  font-family: 'B Yekan';
  font-size: 18px;
  line-height: 54px;
  padding: 0 15px;
  text-decoration: none;
  text-transform: uppercase;
  text-align:right;
  }
  .menu li:hover {
  background-color: #1c1c1c;
  background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
  background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
  background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
  background: -o-linear-gradient(#1c1c1c, #1b1b1b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
  background: linear-gradient(#1c1c1c, #1b1b1b);
  border-bottom: 2px solid #222222;
  border-top: 2px solid #1B1B1B;
  }
  .menu li:hover > a {
  border-radius: 5px 0 0 0;
  border-right: 3px solid #C4302B;
  color: #C4302B;
  }
  /* submenu styles */
  .submenu,
  .children {
  position: absolute;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px;
  }
  .submenu {
  right: 0;
  max-height: 0;
  top: 100%;
  z-index: 0;
  }
  .children {
  right: 160px;
  top: 0;
  }
  .children li,
  .submenu > li {
  position:relative;
  opacity: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transition: opacity .4s, -webkit-transform .5s;
  -moz-transition: opacity .4s, -moz-transform .5s;
  -ms-transition: opacity .4s, -ms-transform .5s;
  -o-transition: opacity .4s, -o-transform .5s;
  transition: opacity .4s, transform .5s;
  }
  .menu .submenu li:hover > a {
  border-left: 3px solid #454545;
  border-radius: 0;
  color: #ffffff;
  }
  .menu > li:hover .submenu, .menu > li:focus .submenu {
  max-height: 2000px;
  z-index: 10;
  }
  .menu > li:hover .submenu > li,
  .menu > li:focus .submenu > li,
  .submenu li:hover > ul > li {
  opacity: 1;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  }
  /* CSS3 delays for transition effects */
  .menu li:hover .submenu li:nth-child(1) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  }
  .menu li:hover .submenu li:nth-child(2) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms;
  }
  .menu li:hover .submenu li:nth-child(3) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  }
  .menu li:hover .submenu li:nth-child(4) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
  }
  .menu li:hover .submenu li:nth-child(5) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
  }
  .menu li:hover .submenu li:nth-child(6) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
  }
  .menu li:hover .submenu li:nth-child(7) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
  }
  .menu li:hover .submenu li:nth-child(8) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
  }
  .submenu li:nth-child(1) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
  }
  .submenu li:nth-child(2) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
  }
  .submenu li:nth-child(3) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
  }
  .submenu li:nth-child(4) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
  }
  .submenu li:nth-child(5) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
  }
  .submenu li:nth-child(6) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  }
  .submenu li:nth-child(7) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms;
  }
  .submenu li:nth-child(8) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  }
  </style>
  </head>
  <body>

  <ul class="menu">
  <li><a href="#">خانه</a></li>
  <li>
  <a href="#s1">موضوع اول</a>
  <ul class="submenu">
  <li>
  <a href="#">...زير مجموعه</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li>
  <a href="#">...زیر مجموعه دوم</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  </ul>
  </li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  </ul>
  </li>
<li>
  <a href="#">...زير مجموعه</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li>
  <a href="#">...زیر مجموعه دوم</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  </ul>
  </li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  </ul>
  </li>
            
             <li>
  <a href="#">...زير مجموعه</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li>
  <a href="#">...زیر مجموعه دوم</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  </ul>
  </li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  </ul>
  </li>
            
             <li>
  <a href="#">...زير مجموعه</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li>
  <a href="#">...زیر مجموعه دوم</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  </ul>
  </li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  </ul>
  </li>
  </ul>
  </li>

  <li><a href="#">موضوع</a></li>
  </ul>

  </body>
</html>
 

homayo0on

Registered User
تاریخ عضویت
25 آگوست 2011
نوشته‌ها
555
لایک‌ها
620
HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
  <meta charset="utf-8">
  <title>MENU</title>
  <style type="text/css">
  .menu, .menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
  .menu {
  height: 58px;
  }
  .menu li {
  background: -moz-linear-gradient(#292929, #252525);
  background: -ms-linear-gradient(#292929, #252525);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
  background: -webkit-linear-gradient(#292929, #252525);
  background: -o-linear-gradient(#292929, #252525);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
  background: linear-gradient(#292929, #252525);
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030;
  min-width: 160px;
  }
  .menu > li {
  display: block;
  float: right;
  position: relative;
  }
  .menu > li:first-child {
  }
  .menu a {
  border-right: 3px solid rgba(0, 0, 0, 0);
  color: #808080;
  display: block;
  font-family: 'B Yekan';
  font-size: 18px;
  line-height: 54px;
  padding: 0 15px;
  text-decoration: none;
  text-transform: uppercase;
  text-align:right;
  }
  .menu li:hover {
  background-color: #1c1c1c;
  background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
  background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
  background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
  background: -o-linear-gradient(#1c1c1c, #1b1b1b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
  background: linear-gradient(#1c1c1c, #1b1b1b);
  border-bottom: 2px solid #222222;
  border-top: 2px solid #1B1B1B;
  }
  .menu li:hover > a {
  border-radius: 5px 0 0 0;
  border-right: 3px solid #C4302B;
  color: #C4302B;
  }
  /* submenu styles */
  .submenu,
  .children {
  position: absolute;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px;
  }
  .submenu {
  right: 0;
  max-height: 0;
  top: 100%;
  z-index: 0;
  }
  .children {
  height:0;
  right: 160px;
  top: 0;
  }
  li:hover > .children {
    height: auto
  }
  .children li,
  .submenu > li {
  position:relative;
  opacity: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transition: opacity .4s, -webkit-transform .5s;
  -moz-transition: opacity .4s, -moz-transform .5s;
  -ms-transition: opacity .4s, -ms-transform .5s;
  -o-transition: opacity .4s, -o-transform .5s;
  transition: opacity .4s, transform .5s;
  }
  .menu .submenu li:hover > a {
  border-left: 3px solid #454545;
  border-radius: 0;
  color: #ffffff;
  }
  .menu > li:hover .submenu, .menu > li:focus .submenu {
  max-height: 2000px;
  z-index: 10;
  }
  .submenu li:hover > ul {
    position: absolute;
    z-index:99999;
  }
  .menu > li:hover .submenu > li,
  .menu > li:focus .submenu > li,
  .submenu li:hover > ul > li {
  opacity: 1;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  }
  /* CSS3 delays for transition effects */
  .menu li:hover .submenu li:nth-child(1) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  }
  .menu li:hover .submenu li:nth-child(2) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms;
  }
  .menu li:hover .submenu li:nth-child(3) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  }
  .menu li:hover .submenu li:nth-child(4) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
  }
  .menu li:hover .submenu li:nth-child(5) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
  }
  .menu li:hover .submenu li:nth-child(6) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
  }
  .menu li:hover .submenu li:nth-child(7) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
  }
  .menu li:hover .submenu li:nth-child(8) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
  }
  .submenu li:nth-child(1) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
  }
  .submenu li:nth-child(2) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
  }
  .submenu li:nth-child(3) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
  }
  .submenu li:nth-child(4) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
  }
  .submenu li:nth-child(5) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
  }
  .submenu li:nth-child(6) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  }
  .submenu li:nth-child(7) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms;
  }
  .submenu li:nth-child(8) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  }
  </style>
  </head>
  <body>

  <ul class="menu">
  <li><a href="#">خانه</a></li>
  <li>
  <a href="#s1">موضوع اول</a>
  <ul class="submenu">
  <li>
  <a href="#">...زير مجموعه</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li>
  <a href="#">...زیر مجموعه دوم</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  </ul>
  </li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  </ul>
  </li>
<li>
  <a href="#">...زير مجموعه</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li>
  <a href="#">...زیر مجموعه دوم</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  </ul>
  </li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  </ul>
  </li>
           
             <li>
  <a href="#">...زير مجموعه</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li>
  <a href="#">...زیر مجموعه دوم</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  </ul>
  </li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  </ul>
  </li>
           
             <li>
  <a href="#">...زير مجموعه</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  <li>
  <a href="#">...زیر مجموعه دوم</a>
  <ul class="children">
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  <li><a href="#">زیر مجموعه سوم</a></li>
  </ul>
  </li>
  <li><a href="#">زیر مجموعه دوم</a></li>
  </ul>
  </li>
  </ul>
  </li>

  <li><a href="#">موضوع</a></li>
  </ul>

  </body>
</html>
 
بالا