PDA

View Full Version : مشکل با زیرمنوها در منو افقی



saeed_sho
سه شنبه 12 دی 1391, 13:49 عصر
سلام
میدونم سؤالم خیلی تکراریه
میخوام منوی افقی بزنم و زیرمنوهاش dropdowlist باشه و تا لایه های نامحدود رو نشون بده
لایه اول درسته اما لایه ی دوم افقی هستش و لایه ی سوم درست نشون نمیده
این کدمه

<div dir="rtl" id="wrapper">
<ul class="nav">
<li class="selected"><a href="#"><span>گوگل</span></a></li>
<li><a href="#"><span>یاهو</span></a>
<ul class="nav">
<li><a href="#"><span>جیمیل</span></a></li>
<li><a href="#"><span>یوتیوب</span></a></li>
</ul>
</li>
<li><a href="#"><span>برنامه نویس</span></a></li>
<li><a href="#"><span>فیسبوک</span></a>
<ul class="nav">
<li><a href="#"><span>تماس با ما</span></a>
<ul class="nav">
<li><a href="#"><span>دانلود</span></a></li>
</ul>
</li>
<li><a href="#"><span>saeed</span></a></li>
</ul>
</li>
</ul>
</div>#wrapper
{
width: 960px;
text-align: center;
border: 1px solid #000000;
z-index: 10;
}
.nav, .nav ul
{
margin: 0 auto;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
display: block;
width: 960px;
z-index: 12;
font-size: 16px;
text-align: right;
width: 960px;
}
.nav li a:link, .nav li a:active, .nav li a:visited
{
background-color: #345D9C;
background-image: linear-gradient(center top, #5C8AD1, #254C88);
background-image: -moz-linear-gradient(center top, #5C8AD1, #254C88);
background-image: -webkit-linear-gradient(center top, #5C8AD1, #254C88);
background-image: -o-linear-gradient(center top, #5C8AD1, #254C88);
background-image: -ms-linear-gradient(center top, #5C8AD1, #254C88);
border-left: 1px solid #5C8AD1;
border-top: 1px solid #3A65A8;
display: block;
padding: 10px 20px;
color: #ffffff;
text-decoration: none;
background-color: #333333;
text-align: right;
font-weight: bold;
}
.nav .selected a:link, .nav .selected a:active, .nav .selected a:visited
{
background-color: #ffffff;
background-image: linear-gradient(center top, #E3E3E3 10%, white 50%);
background-image: -moz-linear-gradient(center top, #E3E3E3 10%, white 50%);
background-image: -webkit-linear-gradient(center top, #E3E3E3 10%, white 50%);
background-image: -o-linear-gradient(center top, #E3E3E3 10%, white 50%);
background-image: -ms-linear-gradient(center top, #E3E3E3 10%, white 50%);
border-color: #ffffff !important;
border-left-style: solid;
border-left-width: 1px;
border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-right-style: solid;
border-right-width: 1px;
border-top-style: solid;
border-top-width: 1px;
display: block;
padding: 10px 20px;
color: #3464A5;
text-decoration: none;
background-color: #333333;
text-align: right;
font-weight: bold;
}
.nav li a:hover
{
color: #ffffff;
background: #174381;
}
.nav li
{
float: right;
position: relative;
font-weight: bold;
}
.nav ul
{
position: absolute;
display: none;
}
.nav li ul a
{
float: right;
}
.nav ul ul
{
top: auto;
width: 100%;
z-index: 10000712;
}
.nav li ul ul
{
position: relative;
margin: 0 0 0 10px;
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul
{
display: none;
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul
{
display: block;
}
چطوری میشه تا لایه ی نامحدود رو ساپورت کنه؟
لطفا راهنمایی کنید

saeed_sho
سه شنبه 12 دی 1391, 13:51 عصر
این منو رو ببینید من css منوشو دیدم تا نوشتنشو یاد بگیرم
نوع باز شدنش میخوام عین اون باشه اما تعداد زیرمنوهاش محدوده
http://www.htmldrive.net/items/show/1070/CSS3-multiple-color-Top-Fixed-Menu
چطوری میشه منویی درست کرد که تعداد زیرمنوهاش نامحدود باشه؟

saeed_sho
سه شنبه 12 دی 1391, 16:41 عصر
دوستان من بار اوله منو با این روش میزنم چند روزه درگیرم لطفا کمک کنید
اگه تعداد زیرمنوها محدود باشه و مدیر سایت بخواد منو اضافه کنه دچار مشکل میشه راه حل چیه؟
منویی که زدم سطح دومش افقیه میخوام عمودی باشه مقدار float رو none میدم درست نمیشه :گریه:

saeed_sho
سه شنبه 12 دی 1391, 19:50 عصر
کدهای منوی قبلی رو بیخیال این کدهارو زدم تا حدود زیادی درسته
سناریو رو خودم درست کردم اما وقتی موس میره روی زیرمنوی اول زیرمنوی دوم نشون داده نمیشه

<div dir="rtl" id="wrapper">
<ul class="menu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a>
<ul class="submenu">
<li><a href="#">submenu-submenu1</a></li>
<li><a href="#">submenu-submenu2</a>
<ul class="submenu">
<li><a href="#">submenu-submenu-submenu1</a></li>
<li><a href="#">submenu-submenu-submenu2</a></li>

</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>

.wrapper
{
width: 960px;
border: 1px solid #000000;
z-index: 10px;
text-align: center;
}
.menu, .menu ul
{
list-style: none;
list-style-position: outside;
width: 960px;
margin: 0 auto;
padding: 0;
font-size: 16px;
text-align: right;
}
.menu li
{
float: right;
position: relative;
margin-left: 3px;
font-weight: bold;
}
.menu ul
{
position: absolute;
top: 21px;
right: -1px;
width: 150px;
padding: 0;
display: none;
}
.submenu ul
{
position: absolute;
top: 0;
right: 150px;
width: 150px;
padding: 0;
display: none;
}
.menu ul li
{
float: none;
padding: 0;
margin: 0;
line-height: 25px;
}
.submenu ul li
{
float: none;
padding: 0;
margin: 0;
line-height: 25px;
}
.menu li:hover ul.submenu
{
display: block;
}
.submenu li:hover ul.submenu
{
display: block;
}
.menu li:hover ul.submenu ul
{
display: none;
}
.submenu li:hover ul.submenu ul
{
display: none;
}

این قسمت درس کار نمیکنه
.submenu li:hover ul.submenu
{
display: block;
}

لطفا کمک کنید

h.torabi
پنج شنبه 12 بهمن 1391, 12:08 عصر
سلام میشه یک اموزش برای این مورد بزارید من یک تازه کارم و جدیدن وارد این سایت شدم
متشکرم:قلب::قلب::قلب::قلب::قل :

afshin9032
پنج شنبه 12 بهمن 1391, 16:40 عصر
superfish rtl رو جستجو کن.
ابزار قوی برای ساختن منوی افقی و عمودی می باشد .
فارسی هم پشتیبانی می کنه .