سوال در مورد منوی آبشاری

[masoud1373 10]

سلام

من میخوام با ul li منوی آبشاری بسازم.

کد css را به صورت زیر تعریف کردم.

#header .topmenu .moduletable ul.menu li.active.parent a,
#header .topmenu .moduletable ul.menu li.active.deeper.parent ul li.current.active  a,
#header .topmenu .moduletable ul.menu li.current.active a{color:#FF0;background:url(../images/topmenu.png) top repeat-x;border-radius:5px;}

#header .topmenu .moduletable ul li ul li{display:none;}
#header .topmenu  ul li:hover ul{border:1px solid #633a01;direction:rtl;display:block; background:#b9903c;float:right; margin:5px 0 0 0;border-radius:5px;}
#header .topmenu ul li:hover ul li{ display:block; width:100px;  margin-right:-22px;}

اما مشکل اینجاست که فقط وقتی که منوی والد فعال است زیر منو باز میشه اما منو های دیگه زیر منوهاشون باز نمیشه.

چی کار کنم؟؟؟

[masoud1373 10]

از اساتید بزرگوار کسی نبود راهنمایی کنه؟؟؟؟

[dis_card 16]

سلام توی فایل ایندکس قالبت از این کد به جای کلاس منوت استفاده کن

<div id="menu">
 <?php if($this->countModules('menu-center')): ?>
 <div id="menu-center">
   <jdoc:include type="modules" name="menu-center" style="xhtml" />
 </div>

و برای قسمت سی اس اس این کد رو درج کن مشکلت برطرف میشه

/*start menu*/
#menu {
-moz-box-shadow: 0 9px 5px -5px #999;
-webkit-box-shadow: 0 9px 5px -5px #999;
box-shadow: 0 9px 5px -5px #999;
}
#menu-center {
background:#09F;
max-width: 980px;
margin: 0 auto;
direction:rtl;
}
#menu ul li {
display: inline-block;
font: normal 16px/40px "b koodak", bkoodak, arial;
position: relative;
}
#menu ul li a {
display: block;
padding: 0 12px;
color: #FFF;

}
#menu .menu li a:hover, #menu .menu .active ul li a:hover, #menu .menu .active ul li ul li a:hover {
background: #E8E8E8;
color: #0048B4;
}
#menu .menu .active a, #menu .nav .active a:hover {
color: #CE205A;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
#menu ul li ul {
z-index: 99999;
position: absolute;
width: 170px;
right: -999em;
margin: 0;
padding: 5px 0;
background-color: #131313;
-webkit-border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;

}
#menu ul li ul li a {
color: #fff;
font: normal 14px/26px "b koodak", bkoodak, arial;
}
#menu ul li:hover ul, #menu ul li.sfHover ul {
right: 0;
}
#menu ul li ul li:hover ul {
right: 170px;
top: 0;
}
#menu ul li ul li {
padding: 0;
height: auto;
width: 170px;
margin: 0 0 5px 0;
}
#menu ul li:hover ul li a {
padding: 1px 10px 1px 0px;
}
#menu ul li ul ul, #menu ul li:hover ul ul, #menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul {
right: -999em;
}
#menu .menu .active ul li a, #menu .menu .active ul li ul li a {
color: #333;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 0, 0, 0);
}
/*start menu*/

دقت کن که موقعیت منوی اصلی رو روی menu-center ست کنید

قبل از هر اقدامی از قالبت بک آپ تهیه کن موفق باشید

[masoud1373 10]

سلام توی فایل ایندکس قالبت از این کد به جای کلاس منوت استفاده کن

<div id="menu">
 <?php if($this->countModules('menu-center')): ?>
 <div id="menu-center">
   <jdoc:include type="modules" name="menu-center" style="xhtml" />
 </div>

و برای قسمت سی اس اس این کد رو درج کن مشکلت برطرف میشه

/*start menu*/
#menu {
-moz-box-shadow: 0 9px 5px -5px #999;
-webkit-box-shadow: 0 9px 5px -5px #999;
box-shadow: 0 9px 5px -5px #999;
}
#menu-center {
background:#09F;
max-width: 980px;
margin: 0 auto;
direction:rtl;
}
#menu ul li {
display: inline-block;
font: normal 16px/40px "b koodak", bkoodak, arial;
position: relative;
}
#menu ul li a {
display: block;
padding: 0 12px;
color: #FFF;

}
#menu .menu li a:hover, #menu .menu .active ul li a:hover, #menu .menu .active ul li ul li a:hover {
background: #E8E8E8;
color: #0048B4;
}
#menu .menu .active a, #menu .nav .active a:hover {
color: #CE205A;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
#menu ul li ul {
z-index: 99999;
position: absolute;
width: 170px;
right: -999em;
margin: 0;
padding: 5px 0;
background-color: #131313;
-webkit-border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;

}
#menu ul li ul li a {
color: #fff;
font: normal 14px/26px "b koodak", bkoodak, arial;
}
#menu ul li:hover ul, #menu ul li.sfHover ul {
right: 0;
}
#menu ul li ul li:hover ul {
right: 170px;
top: 0;
}
#menu ul li ul li {
padding: 0;
height: auto;
width: 170px;
margin: 0 0 5px 0;
}
#menu ul li:hover ul li a {
padding: 1px 10px 1px 0px;
}
#menu ul li ul ul, #menu ul li:hover ul ul, #menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul {
right: -999em;
}
#menu .menu .active ul li a, #menu .menu .active ul li ul li a {
color: #333;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 0, 0, 0);
}
/*start menu*/

دقت کن که موقعیت منوی اصلی رو روی menu-center ست کنید

قبل از هر اقدامی از قالبت بک آپ تهیه کن موفق باشید

با تشکر از شما

مشکل پابرجاست.

و حل نشده.

لطفا راهنمایی کنید.

[dis_card 16]

با تشکر از شما

مشکل پابرجاست.

و حل نشده.

لطفا راهنمایی کنید.

کدی که دادم توی قالب جوملاتون به درستی کار میکنه ولی اگر حتما میخواهید از ul li در خود html استفاده کنید به این صورت عمل کنید

<div id='cssmenu'>
<ul>
  <li class='active'><a href='index.html'><span>Home</span></a></li>
  <li class='has-sub'><a href='#'><span>Products</span></a>
     <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
           <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li class='last'><a href='#'><span>Sub Item</span></a></li>
           </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
           <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li class='last'><a href='#'><span>Sub Item</span></a></li>
           </ul>
        </li>
     </ul>
  </li>
  <li><a href='#'><span>About</span></a></li>
  <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

و برای CSS خود اینگونه استایل بنوسید

@charset 'UTF-8';
/* Base Styles */
#cssmenu > ul,
#cssmenu > ul li,
#cssmenu > ul ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#cssmenu > ul {
 position: relative;
 z-index: 597;
}
#cssmenu > ul li {
 float: right;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
#cssmenu > ul ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 right: 0;
 z-index: 598;
 width: 100%;
}
#cssmenu > ul ul li {
 float: none;
}
#cssmenu > ul ul ul {
 top: 1px;
 right: 99%;
}
#cssmenu > ul li:hover > ul {
 visibility: visible;
}
/* Align last drop down RTL */
#cssmenu > ul > li.last ul ul {
 right: auto !important;
 left: 99%;
}
#cssmenu > ul > li.last ul {
 right: auto;
 left: 0;
}
#cssmenu > ul > li.last {
 text-align: right;
}
/* Theme Styles */
#cssmenu > ul {
 border-top: 4px solid #3fa338;
 font-family: Calibri, Tahoma, Arial, sans-serif;
 font-size: 14px;
 background: #1e1e1e;
 background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));
 background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);
 background: linear-gradient(top, #1e1e1e 0%, #040404 100%);
 width: auto;
 zoom: 1;
 direction:rtl;
}
#cssmenu > ul:before {
 content: '';
 display: block;
}
#cssmenu > ul:after {
 content: '';
 display: table;
 clear: both;
}
#cssmenu > ul li a {
 display: inline-block;
 padding: 10px 22px;
}
#cssmenu > ul > li.active,
#cssmenu > ul > li.active:hover {
 background-color: #3fa338;
}
#cssmenu > ul > li > a:link,
#cssmenu > ul > li > a:active,
#cssmenu > ul > li > a:visited {
 color: #ffffff;
}
#cssmenu > ul > li > a:hover {
 color: #ffffff;
}
#cssmenu > ul ul ul {
 top: 0;
}
#cssmenu > ul li li {
 background-color: #ffffff;
 border-bottom: 1px solid #ebebeb;
 font-size: 12px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
 background-color: #F5F5F5;
}
#cssmenu > ul > li.hover,
#cssmenu > ul > li:hover {
 background-color: #3fa338;
 -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
 -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
 box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
#cssmenu > ul a:link,
#cssmenu > ul a:visited {
 color: #9a9a9a;
 text-decoration: none;
}
#cssmenu > ul a:hover {
 color: #9a9a9a;
}
#cssmenu > ul a:active {
 color: #9a9a9a;
}
#cssmenu > ul ul {
 border: 1px solid #CCC 9;
 -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
 -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
 box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
 width: 150px;
}

موفق باشید